Запустить
<!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 - Создание адаптивной галереи изображений на Mosaic Flow</title> <base href="https://itchief.ru"> <!-- 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> .mosaicflow__item { padding: 3px; } .mosaicflow__column { float: left; } .mosaicflow__item img { display: block; width: 100%; height: auto; padding: 4px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; } .mosaicflow__item img:hover { opacity: 0.6; filter: alpha(opacity=60); } </style> </head> <body> <div class="container"> <h1 class="h3 text-center">Bootstrap 3 - MosaicFlow на нескольких вкладках</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#tab-1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab-2" data-toggle="tab">Tab 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab-1"> <!-- Содержимое 1 вкладки --> <div class="tab-content"> <div class="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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> </div> <div class="tab-pane" id="tab-2"> <!-- Содержимое 2 вкладки --> <div class="tab-content"> <div class="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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="mosaicflow__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> </div> </div> <!-- jQuery --> <script src="/examples/vendors/jquery/jquery-1.12.4.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> <!-- Mosiac Flow --> <script src="/examples/vendors/mosaicflow/jquery.mosaicflow.js"></script> <script> $(function () { // массив для хранения id вкладок, которые уже иницилиазированы с помощью Mosaic Flow var idTabPanes = []; // функция для инициализации Mosaic Flow для вкладки function initMosaicFlow(idTabPane) { if (idTabPanes.indexOf(idTabPane) === -1) { idTabPanes.push(idTabPane); $(idTabPane + ' .tab-content').mosaicflow({ itemSelector: '.mosaicflow__item', minItemWidth: 300 }); $(window).trigger('resize'); } } // активнование Mosaic Flow после загрузки страницы, если есть активная вкладка if ($('.tab-pane.active').length) { initMosaicFlow('#' + $('.tab-pane.active').prop('id')); } // событие, происходящее при открытии вкладки $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initMosaicFlow($(e.target).attr('href')); }); }); </script> </body> </html>