www.seomark.ru |
Веб-дизайн и поисковая оптимизация |
||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | |||||
Создание фотогалереи на сайте
Фотогалерея jQuery со слайд-шоуВ предыдущей статье было рассказано о создании на сайте фотогалереи с помощью плагина jQuery LightBox. На его основе создано много различных вариантов галерей, отличающихся как дизайном, так и возможностями вывода различного контента: фотографий, видео, flash и др. Например, интересный и простой в установке плагин NFLightBox позволяет не только листать изображения, но и запускать автоматическую их прокрутку, то есть слайд-шоу. Пример его работы показан на рисунке: Так как установка плагинов jQuery на сайт подробно описана в предыдущей статье, то здесь лишь кратко повторю необходимые действия. Установка фотогалереи NFLightBox
Обратите внимание на строчку $(".gallery a").lightBox({. Здесь указан класс, который необходимо указать для контейнера, в котором размещены изображения для фотогалереи. В нашем примере, это строчка таблицы <tr class="gallery">.
В принципе, на этом установка фотогалереи завершена. Осталось разместить на странице ваши изображения. Они должны быть двух видов: полноразмерные (big) и миниатюры-превьюшки (small). Картинка-миниатюра заключена в тэг <а>...</a>, атрибут href которого указывает на соответствующее полноразмерное изображение. В отличие от рассмотренного ранее скрипта jQuery LightBox, здесь не надо указывать дополнительный атрибут rel, так как NFLightBox автоматически создает фотогалерею из всех изображений, размещенных в контейнере с class="gallery". Таким образом, HTML код показанной вверху фотогалереи следующий:
Настройка фотогалереи NFLightBoxПлагин NFLightBox имеет несколько настроек. Они находятся в скрипте, который мы разместили в теге <head>...</head> (см.п.3 вверху). Их можно менять: Дополнительно вы можете аналогично установить и другие параметры, например: Полностью все настройки можно посмотреть в начале файла NFLightBox.js, открыв его в редакторе или Блокноте. Вы также можете изменять их, но учтите, что приоритетом пользуются настройки, заданные непосредственно на странице с фотогалереей, то есть те, что указаны в скрипте в теге <head>...</head>. Кроме указанных настроек, вы можете изменять и вспомогательные изображения, например, значки вперед/назад, запуск слайд-шоу, загрузка и др. Они размещены в папке scripts/images. Все настройки можно устанавливать не только непосредственно Таким образом, с помощью jQuery LightBox и NFLightBox можно буквально за несколько минут создать на сайте вполне приличную фотогалерею при условии, что изображения для неё уже подготовлены и отредактированы. О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO". 17.04.2013 г. |
|||||
|
|||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | |||||
Copyright © 2008 - Марк Розенталь e-mail: Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: jquery фотогалерея, скрипт фотогалереи, создание фотогалерей, бесплатная фотогалерея, слайд-шоу, создание фотогалереи со слайд-шоу |