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

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

Логотип Софт

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

Фотогалерея jQuery со слайд-шоу

В предыдущей статье было рассказано о создании на сайте фотогалереи с помощью плагина jQuery LightBox. На его основе создано много различных вариантов галерей, отличающихся как дизайном, так и возможностями вывода различного контента: фотографий, видео, flash и др. Например, интересный и простой в установке плагин NFLightBox позволяет не только листать изображения, но и запускать автоматическую их прокрутку, то есть слайд-шоу. Пример его работы показан на рисунке:

Так как установка плагинов jQuery на сайт подробно описана в предыдущей статье, то здесь лишь кратко повторю необходимые действия.

Установка фотогалереи NFLightBox
  1. Скачиваете архив с необходимыми файлами. Это два скрипта jquery-1.8.3.min.js и NFLightBox.js, файл стилей СSS - nf.lightbox.css и папка с вспомогательными изображениями - images.
  2. Создаете папку nf_lighbox в том же каталоге (папке), где расположена страница с фотогалереей, и распаковываете в неё скачанный архив.
  3. В теге <head>...</head> на странице фотогалереи указываете путь к новым файлам и размещаете дополнительный скрипт, необходимый для установки параметров фотогалерии:
    <link type="text/css" href="nf_lighbox/nf.lightbox.css" rel="stylesheet" />
    <script src="nf_lighbox/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="nf_lighbox/NFLightBox.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $(".gallery a").lightBox({ // Выбор все ссылок с class="gallery"
    overlayBgColor: '#777', // Цвет фона
    overlayOpacity: '0.8', // Прозрачность фона
    txtImage: 'Фото',
    txtOf: 'из',
    txtPrev: '&nbsp;Назад',
    txtNext: '&nbsp;Вперед',
    txtslideShow: '&nbsp;Слайд-шоу',
    slideShowTimer: '3000', // Скорость слайд-шоу в мс
    containerResizeSpeed: '500' // Скорость смены картинок по кнопкам вперед/назад
    });
    });
    </script>

Обратите внимание на строчку $(".gallery a").lightBox({. Здесь указан класс, который необходимо указать для контейнера, в котором размещены изображения для фотогалереи. В нашем примере, это строчка таблицы <tr class="gallery">.

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

В принципе, на этом установка фотогалереи завершена. Осталось разместить на странице ваши изображения. Они должны быть двух видов: полноразмерные (big) и миниатюры-превьюшки (small). Картинка-миниатюра заключена в тэг <а>...</a>, атрибут href которого указывает на соответствующее полноразмерное изображение. В отличие от рассмотренного ранее скрипта jQuery LightBox, здесь не надо указывать дополнительный атрибут rel, так как NFLightBox автоматически создает фотогалерею из всех изображений, размещенных в контейнере с class="gallery".

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

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

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

Плагин NFLightBox имеет несколько настроек. Они находятся в скрипте, который мы разместили в теге <head>...</head> (см.п.3 вверху). Их можно менять:
overlayBgColor: '#777' - задание цвета фона,
overlayOpacity: '0.8' - прозрачность фона. Можно использовать значения от 0 до 1,
txtImage: 'Фото',   txtOf: 'из',   txtPrev: ' Назад' и др. - надписи в окне фотогалереи,
slideShowTimer: '5000' - время в миллисекундах показа одного кадра в слайд-шоу.

Дополнительно вы можете аналогично установить и другие параметры, например:
containerBorderSize – (по умолчанию 10) задает ширину рамки вокруг просматриваемого изображения,
containerResizeSpeed – (по умолчанию 500) время в миллисекундах, за которое будет меняться изображение при переходе от одного к другому при нажатии кнопок вперед/назад,
keyToClose, keyToPrev, keyToNext – с помощью этих опций можно задать "горячие" клавиши. Например, keyToClose:’q’ – при нажатии клавиши ‘q’ просмотр будет прекращен. По умолчанию, листать изображения можно клавишами вперед/назад на клавиатуре компьютера.

Полностью все настройки можно посмотреть в начале файла NFLightBox.js, открыв его в редакторе или Блокноте. Вы также можете изменять их, но учтите, что приоритетом пользуются настройки, заданные непосредственно на странице с фотогалереей, то есть те, что указаны в скрипте в теге <head>...</head>.

Кроме указанных настроек, вы можете изменять и вспомогательные изображения, например, значки вперед/назад, запуск слайд-шоу, загрузка и др. Они размещены в папке scripts/images.

Все настройки можно устанавливать не только непосредственно

Таким образом, с помощью jQuery LightBox и NFLightBox можно буквально за несколько минут создать на сайте вполне приличную фотогалерею при условии, что изображения для неё уже подготовлены и отредактированы.

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

17.04.2013 г.

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






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

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