javascript - initiate Lightbox on button click -

javascript - initiate Lightbox on button click -

on hover on images button appears html

<div class="block-11 block-1"> <div class="carousel-wrapper" id="carousel-1"> <ul class="carousel clearfix"> <li> <a href="img/img_8.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_8.jpg" alt="" width="646" height="350"> </a> </li> <li> <a href="img/img_9.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_9.jpg" alt="" width="646" height="350"> </a> </li> <li> <a href="img/img_10.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_10.jpg" alt="" width="646" height="350"> </a> </li> <li> <a href="img/img_8.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_8.jpg" alt="" width="646" height="350"> </a> </li> <li> <a href="img/img_9.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_9.jpg" alt="" width="646" height="350"> </a> </li> <li> <a href="img/img_10.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_10.jpg" alt="" width="646" height="350"> </a> </li> </ul> <div class="semitransparentoverlay"> <input name="" type="button" value="Смотреть все фото" class="btn-1"> </div> </div> </div>

http://jsfiddle.net/1po0acv6/5/

is there way images downloaded lightbox when clicked on button?

the images not "downloaded" lightbox on button click, have add together images in innerhtml of 'ul class="carousel clearfix"', mean html of 'li' including children 'a' , 'img'. , reinitialize lightbox.

like this:

jquery('#button').click(function(){ $('ul.carousel').html('<li> <a href="img/img_10.jpg" data-lightbox="gallery-1" data-title=""> <img src="img/img_10.jpg" alt="" width="646" height="350"> </a> </li>'); //now code lightbox reinitialization, according library using });

best of luck :)

javascript jquery lightbox lightbox2