Geek Answers Handbook

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

Help! I am working on a site for a team of writers.

They want to show examples of specific tasks they worked on (portfolio) using the shadowbox effect.

After opening (in the overlay) the image, which is actually a screenshot of .doc, for example, will have a caption to explain it roughly. The fact is that they need a link inside the label so that the user can download files (.doc, .pdf) to their desktop or link to another site on which they worked.

I managed to do this with Fancybox, but the way to include a link in it shows unwanted text when it hangs (yellow browser hint).

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, this is a link to a website.

+5
source share
3 answers

If it looks like most of the 'lightbox' plugins, I believe you need to use these symbol objects, for example:

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

will become

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

Put this in your title tag and it will be linked.

Get a complete list of HTML symbol objects at http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

+10
source

Thanks so much for this post! It helped me a lot, but then a tooltip came out of the water for me. THEN! I found an easy solution for this part. Add a title attribute that contains a space (must have a space) in 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! There is no tooltip or caption with the link added.

+4

PrettyPhoto . , ... .

PrettyPhoto, , Joomla, WordPress ..

, Joomla . , Joomla ( Joomla). : http://www.catpin.com/prettyphoto

ZIP : 1) jquery.prettyPhoto.js 2) PHP script, ( ).

, ... , , , .

+2

More articles:


All Articles