"Gallery with pagination"
Bootstrap 3.0.3 Snippet by Doogy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="http://placehold.it/558x286&text=First image" class="img-responsive img-gallery" alt="First image">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="http://placehold.it/558x286&text=Second image" class="img-responsive img-gallery" alt="Second image">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="http://placehold.it/558x286&text=Third image" class="img-responsive img-gallery" alt="Third image">
</a>
</div> <!-- /.col -->
<div class="col-xs-3 gallery-item">
<a href="#galleryImg1" class="link-gallery" data-toggle="modal" data-target="#modalGallery">
<img src="http://placehold.it/558x286&text=Fourth image" class="img-responsive img-gallery" alt="Fourth image">
</a>
</div> <!-- /.col -->
</div> <!--/.row -->
</div> <!-- /.container -->
</div> <!-- /.gallery -->
<div class="modal fade" id="modalGallery" tabindex="-1" role="dialog" aria-labelledby="modalGalleryLabel" aria-hidden="true">
<div class="modal-dialog">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
.gallery{
margin-top: 100px;
}
.gallery-item{
margin-bottom: 30px;
}
.modal-footer{
text-align: center;
}
.pagination{
margin: 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function(){
$('.link-gallery').click(function(){
var galleryId = $(this).attr('data-target');
var currentLinkIndex = $(this).index('a[data-target="'+ galleryId +'"]');
createGallery(galleryId, currentLinkIndex);
createPagination(galleryId, currentLinkIndex);
$(galleryId).on('hidden.bs.modal', function (){
destroyGallry(galleryId);
destroyPagination(galleryId);
});
$(galleryId +' .carousel').on('slid.bs.carousel', function (){
var currentSlide = $(galleryId +' .carousel .item.active');
var currentSlideIndex = currentSlide.index(galleryId +' .carousel .item');
setTitle(galleryId, currentSlideIndex);
setPagination(++currentSlideIndex, true);
})
});
function createGallery(galleryId, currentSlideIndex){
var galleryBox = $(galleryId + ' .carousel-inner');
$('a[data-target="'+ galleryId +'"]').each(function(){
var img = $(this).html();
var galleryItem = $('<div class="item">'+ img +'</div>');
galleryItem.appendTo(galleryBox);
});
galleryBox.children('.item').eq(currentSlideIndex).addClass('active');
setTitle(galleryId, currentSlideIndex);
}
function destroyGallry(galleryId){
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Removing the default value for arg #2 in setPagination() allows this to work in Internet Explorer.

Slaughter (Dan Falconer) () - 8 years ago - Reply 0