In Prettyphoto.js or Fancybox… How to add a link within the caption

Question

Help! I'm working on a website for a team of writers.

They want to show examples of specific jobs they've worked on (portfolio) by using the shadowbox effect.

Once opened (in overlay) the picture which is actually a screenshot of a .doc for instance, would have a caption to explain it roughly. The thing is, they want a link inside the caption so the user can download the files (.doc, .pdf) to their desktop or link to another site that they haved worked on.

I've managed to do it with Fancybox but the way the link is included in the it shows undesirable text when hovered (the browser yellow tooltip).

Here is the code:

<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>

in this case it's a link to some site.

Answer 1

If it's like most 'lightbox' plugins, I believe you need to do this use character entities for example:

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

would become

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

Put this in your title tag and it will link.

Get a full list of HTML character entities at http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

Thanks so much for this post! It helped me greatly, but then the tooltip showing up blew it all out of the water for me. THEN! I found an easy fix to that part also. Add a title attribute that contains a space (must have a space) to the img inside the anchor tag:

    <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! No Tooltip and the caption works with a link added.

Answer 3

This topic of PrettyPhoto and the inability to add a photo download link has been a discussion for a couple of years now. I'm amazed that the original authors have not addressed this ... as far as I know.

There are now several versions of PrettyPhoto, including some mash-ups that are used as plugins for Joomla, WordPress, etc.

So I took the Joomla plugin and modified it. It can run stand-alone, without Joomla (as I don't use Joomla). You can see my modification here: http://www.catpin.com/prettyphoto

I also include two zipped files: 1) the actual jquery.prettyPhoto.js file 2) the PHP script that does the download (opens the browser download dialog box).

I hope this helps out ... or at least gives you an idea that it can be done.