Галерея с возможностью увеличения изображений — jQuery fancybox

Галерея с возможностью увеличения изображений — 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. И рассмотрим несколько реальных примеров его применения.

Комментарии