myBLOG-Online

Using WordPress? want to have lightbox effects on text links to images?

I am currently using Fancybox for WordPress to create a Fancybox/Lightbox popup for my thumbnail images; but like all Lightbox/Fancybox plugins; it doesn’t work on text links to image files.

I have found a workaround using CSS which will enable Lightbox/Fancybox effects on your text links to images; it is really incredibly simple, just use the following code in your posts or pages.

<a href="image.jpg"><img style="display:none;"/>Descriptive Text</a>

This works because the image is inside the A tag; so the built in functionality of your chosen plugin that creates the Lightbox/Fancybox is activated but the image itself is hidden, leaving the text.

To add a caption, just add ALT and TITLE attributes to the IMG tag as shown below.

<a href="image.jpg"><img style="display:none;" alt="Your Descriptive Text" title="Your Descriptive Text"/>Descriptive Text</a>

3 thoughts on “Using WordPress? want to have lightbox effects on text links to images?

  • glenn
    May 9, 2013 at 04:15

    Hey mate,

    Thanks so much for this info! it’s great! But I want to do this for a gallery, not just a single image. Any Ideas?

    Thanks in advance!

    Glenn


  • For my gallery I use NextGEN Gallery, as seen here, NextGEN can be configured to open up in a lightbox easily. I haven’t found a workaround for opening all text links to images in a lightbox yet, but to be honest I haven’t had a need so haven’t researched it!


  • rory
    July 26, 2013 at 04:42

    Great job!


Have Something To Say About This Post? Please Comment Below!