Search code examples
javascripthtmlcsslightbox2

Using a lightbox set which is activated by clicking on a separate div

I have got my lightbox working which is great! On my site I have multiple images (relating to different organisations) and when you click on the image that specific light box opens up.

I wont to know how can I have a lightbox set without having all the images in the set displayed on he webpage? (I only wont them displayed when someone clicks on the trigger image- not incorporated in the lightbox).

The code for one image in a lightbox is below: 

<div class="belmont" style="margin-left:30px; margin-top:30px;">
    <a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
</div>

Thanks in advance!

Solution

  • You can simply hide the other ones.

    <style>
  /* straight outta boilerplate h5bp.com */
  /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
     .visuallyhidden { 
        border: 0; clip: rect(0 0 0 0); 
        height: 1px; margin: -1px; 
        overflow: hidden; padding: 0; 
        position: absolute; width: 1px; 
      }

      /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
      .visuallyhidden.focusable:active, 
      .visuallyhidden.focusable:focus { 
         clip: auto; 
         height: auto; 
         margin: 0; 
         overflow: visible; 
         position: static; 
         width: auto; 
      }

</style>

<div class="belmont" style="margin-left:30px; margin-top:30px;">
    <a href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
    <a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
    <a class="visuallyhidden" href="img/belmont/Back-to-the-Shtetlweb.jpg" data-lightbox="belmontimage">
        <img src="images/Belmont4portfoliohover.png" width="163" height="160">
    </a>
</div>