Bootstrap Modal + Carousel Gallery

Description:

For this 3-step tutorial, we're using Boostrap's built-in classes and components:

Inline-list of thumbnail images,
Modal window,
Carousel slider,
Glyphicons.

It may surprise you to know that we are not using ANY custom CSS or JQuery code here. This demo is created entirely with HTML & Bootstrap. Obviously, for this to work, you need a Bootstrap document with links to Bootstrap and jQuery files.

<!--Bootstrap-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!--Latest stable release of jQuery Core Library-->
<script src="https://code.jquery.com/jquery-1.12.2.min.js" integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=" crossorigin="anonymous"></script> 

<!--Bootstrap JS-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

Photo Gallery

Click or tap thumbnails below. Use Prev & Next arrows to cycle through the images.

Caption
Caption
Caption
Caption
Caption
Caption

Add HTML to your <body> tag:

Insert a list of thumbnail images with these classes, links and data properties. Trust the code. It will all come together in Step 3.

<ul class="list-inline">
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="0"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/1"><br>
Caption</a></li>
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="1"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/2"><br>
Caption</a></li>
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="2"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/3"><br>
Caption</a></li>
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="3"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/4"><br>
Caption</a></li>
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="4"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/5"><br>
Caption</a></li>
  <li data-toggle="modal" data-target="#myModal"><a href="#myGallery" data-slide-to="5"><img class="img-thumbnail" src="https://placeimg.com/200/133/nature/6"><br>
Caption</a></li>
<!--end of thumbnails-->
</ul>

Beneath the thumbnails, insert a Bootstrap Modal component. We're using a Glyphicon for the top close button.

<!--begin modal window-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="pull-left">My Gallery Title</div>
<button type="button" class="close" data-dismiss="modal" title="Close"> <span class="glyphicon glyphicon-remove"></span></button>
</div>
<div class="modal-body">

<!--CAROUSEL CODE GOES HERE-->

<!--end modal-body--></div>
<div class="modal-footer">
<div class="pull-left">
<small>Photographs by <a href="https://placeimg.com" target="new">placeimg.com</a></small>
</div>
<button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
<!--end modal-footer--></div>
<!--end modal-content--></div>
<!--end modal-dialoge--></div>
<!--end myModal-->></div>

On line 21, inside the modal-body tag, we insert the Carousel Slider component. Since we don't need the automatic slider feature, we set data-interval to "false." Again, we are using Glyphicons for Previous & Next arrows.

<!--begin carousel-->
<div id="myGallery" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active"> <img src="https://placeimg.com/600/400/nature/1" alt="item0">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 0  description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/2" alt="item1">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 1 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/3" alt="item2">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 2  description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/4" alt="item3">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 3 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/5" alt="item4">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 4 description.</p>
</div>
</div>
<div class="item"> <img src="https://placeimg.com/600/400/nature/6" alt="item5">
<div class="carousel-caption">
<h3>Heading 3</h3>
<p>Slide 5 description.</p>
</div>
</div>
<!--end carousel-inner--></div>
<!--Begin Previous and Next buttons-->
<a class="left carousel-control" href="#myGallery" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#myGallery" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span></a>
<!--end carousel--></div>

And there you have it. A really fast way to create an interactive photo gallery with Bootstrap classes and components. Feel free to experiment with it. Hope you enjoyed this demonstration.

Custom Web Design & Development