www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание фотогалереи на сайте

Фотогалерея Fancybox - установка и настройка

Фотогалерея Fancybox (Фантастический бокс, коробка) - популярный плагин для бесплатной библиотеки скриптов jQuery, один из самых удачных клонов фотогалереи LightBox (см. статью Фотогалерея jQuery - просто и красиво!). Разработчик - латвийский программист Janis Skarnelis. В настоящее время (май 2013 г.) предлагается уже третья версия этого плагина, а также вариант для мобильных устройств. Если вы планируете коммерческое использование плагина Fancybox, то учтите, что это удовольствие платное (цена от 600 руб.).

Fancybox позволяет выводить в окне не только изображения, но и самый разнообразный контент: видео, iframe, HTML и др. Картинки можно прокручивать как кнопками вперед/назад, так и колесом мыши. Программа имеет несколько настроек режима вывода картинок, скорости перелистывания, вида надписей под картинками и др. Пример использования Fancybox для фотогалереи на сайте показан на рисунке (версия V.1.3.3 2010 года). Пример рабочий, кликайте на здоровье!

Установка фотогалереи Fancybox

Для установки фотогалереи Fancybox сначала создадим на сайте новую папку, назвав её, чтобы не путаться, fancybox. Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней четыре скрипта (*.js), вспомогательные картинки (images) и таблица CSS (*.css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации фотогалереи Fancybox:

<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.3.css" type="text/css" media="screen" />
<script type=
"text/javascript" src="fancybox/jquery-1.8.3.min.js"></script>
<script type=
"text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type=
"text/javascript" src="fancybox/jquery.fancybox-1.3.3.js"></script>
<script type=
"text/javascript">
$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
});
</script>

Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.

Теперь необходимо разместить на странице сайта нужные изображения. Как обычно, каждое должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big), на которую указывает ссылка с миниатюры. Размещаем их в соответствие с дизайном сайта, например, в нашем случае - это контейнер <table>...</table>.

Для него указываем класс class="gallery". Если необходимо выводить несколько изображений в одной галерее, надо в каждую ссылку добавить атрибут rel="group_1". Его значение может быть любым, но одинаковым для всех элементов одной галереи. Таким образом можно создать на странице несколько фотогалерей, давая им разные имена в атрибуте rel, например, group_1, group_2 и т.д. Для вывода одиночных изображений rel не нужен.

Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то Fancybox автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Следовательно, для показанной вверху фотогалереи имеем следующий HTML-код:

<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFCC99" class="gallery">
<tr >
<th width="33%" ><a href="big_01.jpg" rel="group_1" title="Субботник"><img src="small_01.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
<th width="34%" ><a href="big_02.jpg" rel="group_1" title="Выездная торговля"><img src="small_02.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
<th width="33%" ><a href="big_03.jpg" rel="group_1" title="Гена и Чебурашка"><img src="small_03.jpg" alt="Фотогалерея" width="160" height="107" /></a></th>
</tr>
</table>

Настройка фотогалереи Fancybox

Для настройки фотогалереи Fancybox откройте файл jquery.fancybox-1.3.3.js в любом HTML- или текстовом редакторе, например, в Блокноте. В самом его конце увидите доступные настройки, например:
overlayShow : true, //затемнение основной страницы (фон) true/false
overlayOpacity : 0.8, //прозрачность фона
overlayColor : '#777', //цвет фона
titleShow : true, //вывод надписей под изображениями
width : 560, //ширина окна
height : 340 //высота окна

и так далее...

Основные из них снабжены комментариями на русском языке. Изменяйте значения параметров и после сохранения файла jquery.fancybox-1.3.3.js можете наблюдать результат, открыв страницу с вашей фотогалереей в браузере.

Вспомогательные картинки (вперед, назад, загрузка, выход и др.) расположены в папке images, и их также можно менять на ваше усмотрение.

Как сказано выше, кроме изображений, Fancybox может выводить в окне и другой контент, например, видео, iframe, HTML и др. Так как наша тема - создание фотогалереи на сайте, то подробно этот вопрос рассматривать не будем. При необходимости, вы легко найдете соответствующие инструкции в интернете, например, в статье Евгения Попова "FancyBox - фотогалерея + модальные окна". Замечу только, что вывод другого контента также реализуется очень просто, и для примера, посмотрим, как c помощью Fancybox вывести содержимое любой HTML-страницы.

Для этого необходимо добавить несколько строк в размещенный вверху страницы код инициализации Fancybox:
<script type="text/javascript">
$(document).ready(function() {
$(".gallery a").fancybox(); // выбор всех ссылок с классом gallery
$("a.iframe").fancybox({ // выбор всех ссылок с классом iframe
width : 560,
height : 340
});
});
</script>

Для вывода HTML-страницы следует использовать следующую конструкцию ссылки:
<a class="iframe" href="URL страницы" title="Текст подписи в окне">Текст или картинка</a>.

Размеры окна, в котором будет выведена страница, устанавливаются в коде инициализации (параметры width и height), или аналогично в файле jquery.fancybox-1.3.3.js также параметрами width и height (см. выше).

Один из примеров использования Fancybox для вывода HTML-страницы рассмотрен в статье "Применение Jquery для формы обратной связи".

Подводя итог, скажу, что фотогалерея FancyBox пользуется популярностью у разработчиков сайтов из-за простоты установки, приятного дизайна вывода галереи изображений, а также возможности работы с разнообразным контентом и поддержки большинством браузеров. Из недостатков отмечу отсутствие вывода номера изображения типа "Изображение X из N", но возможно, в новых версиях эта функция будет добавлена.

О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".

19.05.2013 г.

Задать вопрос автору






Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: jquery фотогалерея, скрипт фотогалереи, создание фотогалерей, бесплатная фотогалерея, fancybox