jqueryfancyboxshadowbox

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


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.


Solution

  • 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

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

    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