<link rel="stylesheet" href="http://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" /> <link rel="stylesheet" href="http://bootstraptema.ru/plugins/2016/magnific-popup/magnific-popup.css" /> <script src="http://bootstraptema.ru/plugins/jquery/jquery-1.11.3.min.js"></script> <script src="http://bootstraptema.ru/plugins/2015/b-v3-3-6/bootstrap.min.js"></script> <script src="http://bootstraptema.ru/plugins/2016/elevatezoom/jquery.elevatezoom.js"></script> <script src="http://bootstraptema.ru/plugins/2016/magnific-popup/jquery.magnific-popup.js"></script> <style> body{background:url(http://bootstraptema.ru/images/bg/bg-4.png)} .carousel { margin-top: 20px; } .item .thumb { width: 25%; cursor: pointer; float: left; } .item .thumb img { width: 100%; margin: 2px; } .item img { width: 100%; } </style> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div id="carousel" class="carousel slide"> <div class="carousel-inner popup-gallery"> <div class="item active"> <a href="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-1-.jpg" title="Material Design"> <img class="zoomm" src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-1-.jpg"> </a> </div> <div class="item"> <a href="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-2-.jpg" title="Material Design"> <img class="zoomm" src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-2-.jpg" alt="Material Design"> </a> </div> <div class="item"> <a href="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg" title="Material Design"> <img class="zoomm" src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg" data-zoom-image="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg"> </a> </div> <div class="item"> <a href="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-4-.jpg" title="Material Design"> <img class="zoomm" src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-4-.jpg"> </a> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel" class="carousel"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-1-.jpg"></div> <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-2-.jpg"></div> <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-3-.jpg"></div> <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="http://bootstraptema.ru/img/md/1920x1080-jpg/material-design-jpeg-1920x1080-4-.jpg"></div> </div> </div> </div> </div> </div> </div><!-- /.row --> </div><!-- /.container --> <script> $(document).ready(function() { $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] }, image: { titleSrc: function(item) { return item.el.attr('title'); } } }); $(".zoomm").elevateZoom({zoomWindowPosition: 7}); }); </script>