Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
.thumbnail {
margin-bottom:6px;
}
img.thumbnail.img-responsive {
margin: 0 auto;
}
.carousel-control.left,.carousel-control.right{
background-image:none;
margin-top:10%;
width:5%;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<h1>Bootstrap 3 lightbox hidden gallery using modal</h1>
<hr>
<div class="row">
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 1" href="#">
<img class="thumbnail img-responsive" id="image-1" src="http://www.devanswer.com/img/1-slider.jpg">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 2" href="#">
<img class="thumbnail img-responsive" id="image-2" src="http://www.devanswer.com/img/2-slider.jpg">
</a>
</div>
<div class="col-12 col-md-4 col-sm-6">
<a title="Image 3" href="#">
<img class="thumbnail img-responsive" id="image-3" src="http://www.devanswer.com/img/3-slider.jpg">
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="hidden" id="img-repo">
<!-- #image-1 -->
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 11" src="http://www.devanswer.com/img/1-1-slider.jpg">
</div>
<div class="item" id="image-1">
<img class="thumbnail img-responsive" title="Image 12" src="http://www.devanswer.com/img/1-2-slider.jpg">
</div>
<!-- #image-2 -->
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://www.devanswer.com/img/2-1-slider.jpg">
</div>
<div class="item" id="image-2">
<img class="thumbnail img-responsive" title="Image 21" src="http://www.devanswer.com/img/2-2-slider.jpg">
</div>
<!-- #image-3-->
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 31" src="http://www.devanswer.com/img/3-1-slider-2.jpg">
</div>
<div class="item" id="image-3">
<img class="thumbnail img-responsive" title="Image 32" src="http://www.devanswer.com/img/3-2-slider-1.jpg">
</div>
</div>
<div class="modal" id="modal-gallery" 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="modal-carousel" class="carousel">
<div class="carousel-inner">
</div>
<a class="carousel-control left" href="#modal-carousel" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a class="carousel-control right" href="#modal-carousel" 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><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(document).ready(function() {
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
$(".modal-title").html($(this).find(".active img").attr("title"));
});
/* when clicking a thumbnail */
$(".row .thumbnail").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
$("#modal-gallery").modal("show");
});
});
</script>
</body>
</html>
