В Prettyphoto.js или Fancybox ... Как добавить ссылку в подписи - PullRequest
Новая
       11

В Prettyphoto.js или Fancybox ... Как добавить ссылку в подписи

5 голосов
/ 02 февраля 2011

Помощь! Я работаю над сайтом для команды писателей.

Они хотят показать примеры конкретных заданий, над которыми они работали (портфолио), используя эффект shadowbox.

После открытия (в оверлее) картинка, которая на самом деле представляет собой скриншот .doc, например, будет иметь подпись, чтобы объяснить ее примерно. Дело в том, что им нужна ссылка внутри заголовка, чтобы пользователь мог загрузить файлы (.doc, .pdf) на свой рабочий стол или ссылку на другой сайт, над которым он работал.

Мне удалось сделать это с Fancybox, но способ, которым ссылка включена в нее, показывает нежелательный текст при наведении (желтая подсказка браузера).

Вот код: 

<a class="group" rel="portfolio"
 href="../../images/pf_nat/cfcBig.png" title="Rédaction de plus de 300 articles. <a href='http://www.groupecfc.com/fr-Ca/' target='_blank'>Visiter le site</a>"><img src="../../images/pf_nat/tn_nat_cfcBig.gif" alt="" width="40" height="40"/></a>

в данном случае это ссылка на какой-то сайт.

Ответы [ 3 ]

10 голосов
/ 02 февраля 2011

Если это похоже на большинство плагинов 'лайтбоксов', я считаю, что вам нужно сделать это, используя символьные объекты, например:

<a href="test.html">hello</a>

станет

&lt;a href=&quot;text.html&quot;&gt;hello&lt;/a&gt;

Поместите это в свой тег заголовка, и он будет ссылаться.

Получить полный список сущностей символов HTML на http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

4 голосов
/ 10 октября 2012

Большое спасибо за этот пост! Это мне очень помогло, но всплывающая подсказка снесла все это из воды для меня. ЗАТЕМ! Я нашел легкое решение этой части также. Добавьте атрибут заголовка, который содержит пробел (должен иметь пробел) к img внутри тега привязки: 

    <a title="&lt;p&gt;&lt;a href=&quot;http://www.mysite.com&quot; title=&quot;&quot;   target=&quot;_blank&quot;&gt;http://www.mysite.com&lt;/a&gt;&lt;/p&gt; " rel="prettyPhoto" href="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg" style=""><img alt="Interactive" **title=" "** src="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg"></a>

Wahoo! Подсказка отсутствует, а подпись работает с добавленной ссылкой.

2 голосов
/ 03 ноября 2012

Эта тема о PrettyPhoto и невозможности добавить ссылку на скачивание фото обсуждается уже несколько лет.Я поражен, что оригинальные авторы не обращались к этому ... насколько я знаю.

В настоящее время существует несколько версий PrettyPhoto, в том числе некоторые гибридные приложения, которые используются в качестве плагинов для Joomla, WordPress,и т.д.

Итак, я взял плагин Joomla и изменил его.Он может работать автономно, без Joomla (поскольку я не использую Joomla).Вы можете увидеть мою модификацию здесь: http://www.catpin.com/prettyphoto

Я также включил два заархивированных файла: 1) сам файл jquery.prettyPhoto.js 2) скрипт PHP, который выполняет загрузку (открывает диалоговое окно загрузки браузера).

Я надеюсь, что это поможет ... или, по крайней мере, даст вам представление, что это можно сделать.

...