В статье рассказываете об одной галереи фотографий для сайтов, которой лично пользуюсь, к которой прикрепляем LightBox.
Тут можно посмотреть более проработанный вариант данной галереи: http://photo.harrix.org/.
Галерея Automatic Image Montage with jQuery примечательна тем, что автоматически заполняет весь слой по горизонтали во всех “строках” фотографий. При этом адаптивна, то есть автоматически подстраивается под размер слоя.
Но есть минусы: в ней нет LightBox, то есть при нажатии на фотографию, мы не увидим увеличенной версии фотки. И не работает правильно с последней версией jQuery, поэтому наиболее известные плагины LightBox не прикрутим.
В статье будет последовательно рассказано о прикручивании лайтбокса TosRUs. Итоговый вариант будет отличаться то того, что есть в демо, так как там есть дополнительная верстка, текст перед загрузкой всех картинок. Но это вы можете посмотреть, глянув исходный текст демо.
Содержание
- Подготовка
- Редактирование файла index.html галереи
- Добавление нужных файлов для работы LightBox
- Прикручивание LightBox
Подготовка
Скачиваем со страницы галереи или отсюда:
Распакуем архив и откроем index.html.
Скачиваем плагин Lightbox тут или отсюда:
Responsive-Touch-Optimized-jQuery-Slider-Plugin-TosRUs.zip
Распаковываем, но пока не трогаем.
Редактирование файла index.html галереи
Вначале удалим слои header и content. Если хотите, то можете оставить, но, как по мне, они тут лишние.
Проставьте ссылки на большие версии рисунков ваших фотографий в слое am-container.
Я пока сделал ссылки на те же самые фотографии, но если вы будете потом свою галереи делать, то следите, чтобы в самой галереи были маленькие изображения, а по ссылке открывались большие по размеру. В противном случае галерея будет долго открываться (если везде будут большие по размеру картинки).
В итоге из этого:
получил вот это:
После слоя am-container находится подключение javascript библиотек и прописывание поведения данной галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.montage.min.js"></script> <script type="text/javascript"> $(function() { /* * just for this demo: */ $('#showcode').toggle( function() { $(this).addClass('up').removeClass('down').next().slideDown(); }, function() { $(this).addClass('down').removeClass('up').next().slideUp(); } ); $('#panel').toggle( function() { $(this).addClass('show').removeClass('hide'); $('#overlay').stop().animate( { left : - $('#overlay').width() + 20 + 'px' }, 300 ); }, function() { $(this).addClass('hide').removeClass('show'); $('#overlay').stop().animate( { left : '0px' }, 300 ); } ); var $container = $('#am-container'), $imgs = $container.find('img').hide(), totalImgs = $imgs.length, cnt = 0; $imgs.each(function(i) { var $img = $(this); $('<img/>').load(function() { ++cnt; if( cnt === totalImgs ) { $imgs.show(); $container.montage({ fillLastRow : true, alternateHeight : true, alternateHeightRange : { min : 90, max : 240 } }); /* * just for this demo: */ $('#overlay').fadeIn(500); } }).attr('src',$img.attr('src')); }); }); </script> |
Объявление библиотек перенесем выше, а скрипт поменяем на другой. То есть вместе вышеприведенного кода добавим:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script type="text/javascript"> $(function() { var $container = $('#am-container'), $imgs = $container.find('img').hide(), //$imgs = $container.find('img'), totalImgs = $imgs.length, cnt = 0; $imgs.each(function(i) { var $img = $(this); $('<img/>').load(function() { ++cnt; $('#number_img').text(cnt.toString()); if( cnt === totalImgs ) { $imgs.show(); $container.montage({ fillLastRow : true, alternateHeight : true, alternateHeightRange : { min : 120, max : 150 }, margin : 0 }); $('#load').css( "display", "none" ); } }).attr('src',$img.attr('src')); }); }); </script> |
А объявления библиотек перенесем в head страницы:
|
1 2 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.montage.min.js"></script> |
В итоге получим работающую галерею, при клике на картинки которой будут открываться картинки, но не в Lightbox.
Добавление нужных файлов для работы LightBox
Теперь посмотрим, что у нас есть в архиве Lightbox:
Из папки lib файл FlameViewportScale.js переносим в папку js нашей библиотеки.
А из папки src копируем полностью папки js и css в папку с галерей:
В папку js галереи нужно еще скинуть версию jquery 1.7.2. Галерея с ней еще работает корректно, а Lightbox с ней уже работает.
http://code.jquery.com/jquery-1.7.2.min.js
В папку js галереи нужно еще скинуть библиотеку Hammer.JS (нужна для работы с LightBox):
http://cdn.jsdelivr.net/hammerjs/2.0.3/hammer.min.js
Прикручивание LightBox
Опять вернемся к редактированию index.html.
Поменяем подключение библиотеки jquery на более новую, то есть строчку:
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> |
заменим на:
|
1 |
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> |
Ниже добавим подключение следующих файлов:
|
1 2 3 4 |
<script type="text/javascript" src="js/hammer.min.js"></script> <script type="text/javascript" language="javascript" src="js/FlameViewportScale.js"></script> <script type="text/javascript" language="javascript" src="js/jquery.tosrus.min.all.js"></script> <link type="text/css" media="all" rel="stylesheet" href="css/jquery.tosrus.all.css" /> |
И сразу после добавления этих строчек пропишем функцию, которая и свяжет рисунки из слоя am-container с LightBox:
|
1 2 3 4 5 6 7 |
<script type="text/javascript" language="javascript"> jQuery(function( $ ) { $('#am-container a').tosrus({ }); }); </script> |
Всё. Галерея полностью готова и работает. В самом начале статьи находится ссылка на получившиеся исходники и демо.
