jquerytwitter-bootstrap-3bootstrap-lightbox

Bootstrap lightbox and multiple images

I am using bootstrap lightbox and trying to get it to work for multiple images on a page. So when you click the thumbnail you get the bigger image.

Anyone know how this is possible?

Thanks

Solution

  • To use lightbox for multiple images, you have to set different id's in href with data-toggle attribute set to lightbox. For example, if you have four images then create these hyperlinks in html first:

    <a data-toggle="lightbox" href="#image1"><img src="image1.png"></a>
<a data-toggle="lightbox" href="#image2"><img src="image2.png"></a>
<a data-toggle="lightbox" href="#image3"><img src="image3.png"></a>
<a data-toggle="lightbox" href="#image4"><img src="image4.png"></a>