"TEST Tiny Thumb with Modal Carousel"
Bootstrap 3.1.0 Snippet by mrmccormack

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <!--??? Put sumbissin here --> <!-- Ref:http://www.bootply.com/116578 --> <div class="container"> <div class="row"> <h2>TEST Tiny Thumb with Modal Carousel</h2> <p> <a href="http://bootsnipp.com/iframe/9mOx" class="btn btn-lg btn-success" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> Full screen</a> </p> <br><br><br><br> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 4" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 5" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 6" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 8" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/777"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 9" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 10" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/EEE"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 11" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 12" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/DDD"></a></div> <div class="col-lg-2 col-sm-3 col-xs-6"><a title="Image 13" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/992233"></a></div> </div> </div> <div class="modal" id="myModal" 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="modalCarousel" class="carousel"> <div class="carousel-inner"> </div> <a class="carousel-control left" href="#modaCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="carousel-control right" href="#modalCarousel" 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>
body{ background-color:#333; color:#ccc; } .thumbnail{ height:100px; height:100px; margin:6px; } .modal-dialog {} .thumbnail { margin-bottom:6px; } .carousel-control.left,.carousel-control.right{ background-image:none; margin-top:10%; width:5%; }
/* copy loaded thumbnails into carousel */ $('.row .thumbnail').on('load', function() { }).each(function(i) { if(this.complete) { var item = $('<div class="item"></div>'); var itemDiv = $(this).parents('div'); var title = $(this).parent('a').attr("title"); item.attr("title",title); $(itemDiv.html()).appendTo(item); item.appendTo('.carousel-inner'); if (i==0){ // set first item active item.addClass('active'); } } }); /* activate the carousel */ $('#modalCarousel').carousel({interval:false}); /* change modal title when slide changes */ $('#modalCarousel').on('slid.bs.carousel', function () { $('.modal-title').html($(this).find('.active').attr("title")); }) /* when clicking a thumbnail */ $('.row .thumbnail').click(function(){ var idx = $(this).parents('div').index(); var id = parseInt(idx); $('#myModal').modal('show'); // show the modal $('#modalCarousel').carousel(id); // slide carousel to selected });

Related: See More


Questions / Comments: