Bootstrap snippet: Bootstrap Gallery with Modal Lightbox and Carousel

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: gallery,modal,carousel



<div class="container bootstrap snippet"> <div class="row"> <h1>Bootstrap 3 Lightbox using Modal</h1> <div class="row"> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/777"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/EEE"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/DDD"></a></div> <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> </div> <hr> <a href="http://bootply.com/71401">Edit on Bootply</a> <hr> </div> </div> <div class="modal" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal">×</button> <h3 class="modal-title"></h3> </div> <div class="modal-body"> <div id="modalCarousel" class="carousel"> <div class="carousel-inner"> </div> <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="carousel-control right" href="#modalCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> <div class="modal-footer"> <button class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
body{margin-top:20px;} .modal-dialog {} .thumbnail {margin-bottom:6px;} .carousel-control.left,.carousel-control.right{ background-image:none; margin-top:10%; width:5%; }
/* copy loaded thumbnails into carousel */ $('.row .thumbnail').on('load', function() { }).each(function(i) { if(this.complete) { var item = $('<div class="item"></div>'); var itemDiv = $(this).parents('div'); var title = $(this).parent('a').attr("title"); item.attr("title",title); $(itemDiv.html()).appendTo(item); item.appendTo('.carousel-inner'); if (i==0){ // set first item active item.addClass('active'); } } }); /* activate the carousel */ $('#modalCarousel').carousel({interval:false}); /* change modal title when slide changes */ $('#modalCarousel').on('slid.bs.carousel', function () { $('.modal-title').html($(this).find('.active').attr("title")); }) /* when clicking a thumbnail */ $('.row .thumbnail').click(function(){ var idx = $(this).parents('div').index(); var id = parseInt(idx); $('#myModal').modal('show'); // show the modal $('#modalCarousel').carousel(id); // slide carousel to selected });
Dey-Dey

Bootstrap Gallery with Modal Lightbox and Carousel

Dey-Dey
  May 2nd 2014, 22:00
12.4K Views