How do I use this Bootstrap snippet?

Load Bootstrap 3.1.0, paste the HTML, add the CSS styles, and include the JS if present to match the live demo.

Can I use it commercially?

Yes. Snippets are free for personal and commercial projects. Review the snippets license page for details.

Is the layout responsive?

Yes. It is built on Bootstrap 3.1.0 and inherits its responsive grid and components.

Bootstrap html snippet. Bootstrap Gallery with Modal Lightbox and Carousel

HTML code

Clean, semantic HTML that powers this Bootstrap 3.1.0 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

              	  
<div class="container bootstrap snippets bootdey">
  <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="https://www.bootdey.com/image/600x350/6495ED/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/5F9EA0/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/DC143C/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF7F50/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/008B8B/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/00FFFF/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF1493/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/9400D3/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/FF69B4/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/ADD8E6/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/E6E6FA/000000"></a></div>
      <div class="col-lg-3 col-sm-4 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="https://www.bootdey.com/image/600x350/B0C4DE/000000"></a></div>
    </div>
    <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>

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.1.0 to keep the design, spacing, and responsiveness consistent.

              	  

                
body{margin-top:20px;}              
.modal-dialog {}
.thumbnail {margin-bottom:6px;}

.carousel-control.left,.carousel-control.right{
  background-image:none;
  margin-top:10%;
  width:5%;
}

Javascript/Jquery code

Lightweight JS to power any interactions this snippet needs. Drop it under your scripts (after Bootstrap 3.1.0) to mirror the live demo.

$(function(){
  /* 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
      
  });
})