"gallery"
Bootstrap 3.3.0 Snippet by evarevirus

Post to Facebook Tweet this

<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> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+13" alt="gallery image thirteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+14" alt="gallery image fourteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+15" alt="gallery image fifteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+16" alt="gallery image sixteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+17" alt="gallery image seventeen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+18" alt="gallery image eighteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+19" alt="gallery image nineteen" /></div> <div class="gallery-item"><img src="http://placehold.it/300.png&text=image+20" alt="gallery image twenty" /></div> </div><!-- /.gllery --> </div><!-- /.container --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Image from Gallery.</h4> <br/> <nav></nav> </div> <div class="modal-body clearfix"> <h4 class='modal-image-caption'></h4> <img id="modal-image" class="img-responsive" src=""><br/> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html>
#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 { text-transform: capitalize; }
$( 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() { clicked_thumbnail_index -= 1; if(clicked_thumbnail_index < 0) { clicked_thumbnail_index = (num_thumbnails - 1); } 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); }); }); });

Questions / Comments: