Запустить
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 3 - Создание адаптивной галереи изображений на Gridify</title> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- fancyBox CSS --> <link href="/examples/vendors/fancybox/jquery.fancybox.min.css" rel="stylesheet"> <style> img { padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } img:hover { opacity: 0.6; filter: alpha(opacity=60); } </style> </head> <body> <div class="container"> <h1 class="h3 text-center">Bootstrap 3 - Создание адаптивной галереи изображений на Gridify</h1> <div class="grid"> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/01.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/01.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/02.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/02.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/03.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/03.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/04.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/04.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/05.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/05.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/06.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/06.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/07.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/07.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/08.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/08.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/09.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/09.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/10.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/10.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/11.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/11.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/12.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/12.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/13.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/13.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/14.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/14.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/15.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/15.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/16.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/16.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/17.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/17.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/18.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/18.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/19.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/19.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/20.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/20.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/21.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/21.jpg" alt=""> </a> </div> <div class="grid-item"> <a data-fancybox="gallery" href="/examples/images/for-image-gallery/22.jpg"> <img class="img-responsive" src="/examples/images/for-image-gallery/22.jpg" alt=""> </a> </div> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-3.2.1.min.js"></script> <!-- Bootstrap JS --> <script src="/examples/vendors/bootstrap-3.3.7/js/bootstrap.min.js"></script> <!-- fancyBox JS --> <script src="/examples/vendors/fancybox/jquery.fancybox.min.js"></script> <!-- Gridify --> <script src="/examples/vendors/gridify/gridify.js"></script> <script> $(function () { var options = { srcNode: 'img', // grid items (class, node) margin: '15px', // margin in pixel, default: 0px width: '240px', // grid item width in pixel, default: 220px max_width: '', // dynamic gird item width if specified, (pixel) resizable: true, // re-layout if window resize transition: 'all 0.5s ease' // support transition for CSS3, default: all 0.5s ease }; $('.grid').gridify(options); }); </script> </body> </html>