Галерея с возможностью увеличения изображений — jQuery fancybox
Итак, для Вас актуальна задача по созданию миниатюр изображений на Вашем сайте с возможностью их увеличения до оригинальных размеров? Вы хотите внедрить целую галерею таких изображений? Или Вам необходимо модальное всплывающее окно с произвольным содержимым?
В предыдущих статьях мы рассмотрели javascript для увеличения изображений highslide, сегодня мы приглядимся к его аналогу на jQuery – fancybox 2. Итак, возможности этой галереи довольно разнообразны. Здесь и способность увеличивать изображения, а также объединять изображения в группы с возможностью навигации между ними прямо в увеличенном окне.
Возможность выводить в окне не только изображения, но и произвольное содержимое, например: формы регистрации, а также загрузка данных при помощи ajax, напрямую при помощи подключения iframe, или даже загрузка flash роликов делают внедрение этого плагина в работу web-сайтов довольно распространенным.
Подключение jQuery плагина fancybox 2
Для начала необходимо загрузить плагин fancybox 2 к Вам на сайт. Его последняя версия доступна по ссылке или же Вы можете скачать его с github . После этого распакуйте содержимое архива к себе на сайт, например в корневую папку сайта /fancybox. Далее после тега <head> добавляем следующие строчки подключения библиотек:
<head> <!-- Подключаем jQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!—Подключаем плагин для управления колесиком мышки (дополнительные возможности) --> <script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!—Подключаем fancyBox --> <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script> <!—Подключение дополнительных возможностей и помощников: кнопок, уменьшение изображения и/или внедрение media – видео файлов --> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script> <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
После чего мы окружаем миниатюры изображений ссылками, которые ведут на детальные изображения, как например:
<a class="fancybox" rel="gallery" href="/original_photo.jpg" title="Оригинальное изображение"><img src="/small_ photo.jpg" alt="Небольшая миниатюра" /></a>
Где:
- тег img содержит миниатюру оригинального изображения;
- тег a с классом .fancybox в атрибуте href или в атрибуте data-fancybox-href указывает на оригинальное изображение большого размера, которое будет открыто в модальном всплывающем окне.
И добавляем вызов всплывающего модального окна с оригинальным изображением внутри при щелчке по ссылке с классом .fancybox (для всех таких ссылок), после того, как получено дерево документа (событие documentReady):
<script type="text/javascript">
jQuery(document).ready(function() {
if(jQuery(".fancybox").length){
jQuery (".fancybox").fancybox();
};
});
</script>
Кроме этого, если Вы хотите сгруппировать несколько изображений в одну галерею, которую можно просмотреть прямо во всплывающем окне, используя элементы навигации (кнопки: вперед, назад, всплывающие, когда Вы подводите к краю увеличенного изображения), достаточно задать нескольким ссылкам с классом .fancybox одно и то же значение атрибута rel:
<a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_b.jpg" title="Мистическое дерево">
<img src="http://farm9.staticflickr.com/8199/8220132885_9e693356e9_m.jpg" alt="Галерея с возможностью увеличения изображений - jQuery fancybox" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm9.staticflickr.com/8061/8224941348_afd0c54a81_b.jpg" title="Последние листья">
<img src="http://farm9.staticflickr.com/8061/8224941348_afd0c54a81_m.jpg" alt="Галерея с возможностью увеличения изображений - jQuery fancybox" />
</a>
А чтобы задать во всплывающем окне подпись под изображением, достаточно задать ссылке с классом .fancybox из нашего примера атрибут title, который и будет являться надписью под изображением. Или используя атрибут data-fancybox-title.
В следующих статьях мы рассмотрим подробнее, с какими типами, кроме изображений, может работать jQuery плагин fancybox 2, какие параметры для настройки модального окна он принимает, а также, как скрипты – помощники могут расширить возможности fancybox. И рассмотрим несколько реальных примеров его применения.