Search code examples
lightboxnivo-slider

Display lightbox gallery without displaying the whole gallery on document


Is it possible to display a Nivo Lightbox Gallarey (or any other responsive lightbox) with for example 4 pictures when a user clicks on a single picture? (the other 3 pictures are hidden and only displayed in the lightbox)


Solution

  • Pretty easy with Nivo. Simply create empty anchors for the other images

    <a href="images/gallery-img-001.jpg" class="gallery-start" data-lightbox-gallery="gallery1"><img src="images/gallery-thumb-004.jpg" width="365" height="245" /></a>
    <a href="images/gallery-img-002.jpg" class="gallery-thumb-hidden" data-lightbox-gallery="gallery1"></a>
    <a href="images/gallery-img-003.jpg" class="gallery-thumb-hidden" data-lightbox-gallery="gallery1"></a>
    <a href="images/gallery-img-004.jpg" class="gallery-thumb-hidden" data-lightbox-gallery="gallery1"></a>
    

    Then call the gallery from JQuery

    $('a.gallery-start').nivoLightbox({...