Search code examples
javascriptlightboxhref

How to launch a LightBox gallery from an 'a href' hyperlink


Stack Overflow have provided some very useful tips re: running multiple LightBox galleries etc, but I have one further question I hope you guys can help with...

Within the static HTML page, I have a single image that the user clicks on to launch the LightBox gallery; pretty simple stuff really, just like the regular LightBox demo.

However, I want to include a 'a href' button just underneath the image that actually says "click here to view gallery" (for those users that may not know that they need to click on the image to launch the gallery etc).

Can you please let me know what code I need for a basic 'a href' button to launch the LightBox gallery as soon as it is clicked?

Many thanks


Solution

  • If you read the How to use part on the lightbox site, you can see what matters:

    The rel="lightbox" attribute. This means that this link is supposed to be opened as an image in a lightbox overlay, so it does not matter what is inside the <a> tag.

    Also there is an example about grouping these links:

    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
    <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
    <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    

    Notice that the rel="" attribute changed. There is a [groupname] part after lightbox. Links with the same groupname will open in one gallery.

    This unobtrusive approach of lightbox2 works well if you have little knowledge about javascript. No need to write a single line of javascript code only use rel attributes.