Jquery Lightbox 2 - image gallery on button click

Question

I am using jquery lightbox 2 plugin in one of my MVC based application. We have albums and their respective images coming from database.

I have listed albums with a link given below to "View All" images in album gallery containing those dynamically created images

 <div id="albumGallery_@albumId" style="display:none">

                    @foreach (var image in albumImageList)
                    {
                        <a class="thumbnail" href="@actualImageName" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard.">
                            <img class="img-responsive" style="width:200px; height:150px;" src="@thumbnailImageName" alt="" />
                        </a>
                    }

                </div>

How can I show image gallery in lightbox on button click?? any advise will be appreciated...

Thanks!

Answer 1

You have to call the start() function passing as argument one of the images that compose the gallery

  <div id="albumGallery_@albumId" style="display:none"> <a href="#" onclick="lightbox.start($('#gallery_img_0')); return false;"> Show Gallery </a> @foreach (var image in albumImageList) { <a id="gallery_img_@imageIndex" class="thumbnail" href="@actualImageName" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."> <img class="img-responsive" style="width:200px; height:150px;" src="@thumbnailImageName" alt="" /> </a> } </div>