Bootstrap Snippet gallery using HTML CSS Javascript

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
  <head>
      <meta charset="utf-8">
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
            <!--  -->
            <!--[if lt IE 8]>
            <script src="dist/html5shiv.js"></script>
            <![endif]-->
        <title>Modal Window with Next and Previous</title>
  </head>
    
  <body>
    <div class="container">
        <div id="gallery row clearfix">
                                                 
                <h2>Gallery of Images</h2>
                
                <div class="gallery-item"><img src="http://placehold.it/300x200.png&text=image+1" alt="gallery image one" title="Gallery Image One"/></div>
                <div class="gallery-item"><img src="http://placehold.it/400x300.png&text=image+2" alt="gallery image two" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300x150.png&text=image+3" alt="gallery image three" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300x600.png&text=image+4" alt="gallery image four" /></div>
                <div class="gallery-item"><img src="http://placehold.it/250x250.png&text=image+5" alt="gallery image five" /></div>
                <div class="gallery-item"><img src="http://placehold.it/200x200.png&text=image+6" alt="gallery image six" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+7" alt="gallery image seven" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+8" alt="gallery image eight" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+9" alt="gallery image nine" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+10" alt="gallery image ten" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+11" alt="gallery image eleven" /></div>
                <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+12" alt="gallery image twelve" /></div>
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
#gallery {
  padding: 10px 0 0 10px;
  background-color: white;
  text-align: center;
  margin: 0 auto;
  border: 2px solid blue;
}
.gallery-item {
  width: 200px;
  height: 200px;
  float:left;
  margin: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 10px solid #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
}
  
.modal {
  text-align: center;
  margin: 0 auto 20px auto;
}
.modal-open {
  margin: 0 auto;
  overflow: auto;
} 
#modal-image {
  margin: 0 auto;
  max-width:100%;
  border-radius: 5px;
}  
.modal-image-caption {
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() {
            $('.gallery-item').on('click', function() {
                var num_thumbnails = $('.gallery-item').children().length;
                var sr = $(this).children('img').attr('src');
                var clicked_thumbnail_index = $($('.gallery-item')).index(this);
                    if(num_thumbnails > 1) {
                        $('nav').html('<button type="button" class="previous">Prev</button><button type="button" class="next">Next</button>');
                }
     
                var caption = $(this).children('img').attr('alt');
                $('#modal-image').attr('src', sr);
                $('h4.modal-image-caption').html(caption);
              $('#myModal').modal('show');
        //***************************
        // Modal Navigation:Next code
        //***************************
                $('button.next').on('click', function() {
                    clicked_thumbnail_index += 1;
                    
                    if(clicked_thumbnail_index >= num_thumbnails) {
                        clicked_thumbnail_index = 0;
                    }
                    var next_sibling = $('.gallery-item:eq(' + clicked_thumbnail_index + ')').children('img').attr('src');
                    $('#modal-image').attr('src', next_sibling);
                    var next_caption = $('.gallery-item:eq(' + clicked_thumbnail_index + ')').children('img').attr('alt');
                    $('#modal-image').attr('alt', next_caption);
                    $('h4.modal-image-caption').html(next_caption);
                });
        //***************************
        // Modal Navigation:Previous code
        //***************************
                $('button.previous').on('click', function() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"gallery"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"gallery" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"gallery"
Bootstrap 3.3.0 Snippet by evarevirus