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

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

Логотип Софт

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

Фотогалерея jQuery - просто и красиво!

В предыдущих статьях были рассмотрены варианты создания фотогалерей для сайта с помощью средств HTML и CSS. В большинстве случаев, они не позволяют создавать красочные галереи с плавными переходами, удобной навигацией и эффектами слайд-шоу. Кроме того, в них сложно добавлять новые фотографии и оперативно менять их вид.

Значительно больше возможностей имеют фотогалереи, созданные с помощью JavaScript. В интернете можно найти множество вариантов оформления фотогалерей. Наиболее популярные из них выполнены на базе jQuery, специальной бесплатной библиотеки скриптов (небольших программ на JavaScript).

Сначала несколько слов об этом замечательном инструменте, облегчающем жизнь веб-дизайнеров. Основоположником jQuery является американский программист Джон Резиг. Он опубликовал свой первый вариант jQuery в Нью-Йорке в 2006 году. Сейчас Джон Резиг является руководителем большой группы разработчиков, занимающейся развитием и пополнением этой библиотеки скриптов.

Основная идея jQuery - отделить выполнение действий на сайте от HTML кода. Для простоты можно сравнить эти действия с правилами CSS, которые отделяют визуализацию, то есть верстку страницы, от HTML кода. Аналогично, скрипты jQuery отделяют выполнение сценариев от структуры HTML. Например, вместо прямого указания на действие при клике мышью по элементу страницы сайта, управление передаётся JQuery, которая и выполняет требуемые операции.

Таким образом, разработчик избавлен от необходимости "изобретать велосипед" и может использовать готовые решения. Причем для работы с jQuery совершенно необязательно быть специалистом по программированию, хотя это всегда приветствуется. Вам надо только уметь изменять необходимые атрибуты, например, встроенные картинки, надписи, скорость выполнения операций и т.п.

Продолжая аналогию с CSS, вспомним, что для того, чтобы к правилам CSS можно было обращаться с разных страниц сайта, их обычно выделяют в отдельный файл. Также поступают и со скриптами jQuery - их размещают отдельно от HTML страницы, как один или несколько внешних js-файлов, и вызывают по мере необходимости. Размещают указатели на скрипты аналогично указателям на css-файлы внутри тега <head> :

<head>...
<script type="text/javascript" src="путь к скриптам jQuery.js"></script>
</head>

Обычно все скрипты и необходимые для них файлы (изображения, таблицы CSS и др.) помещают для удобства в отдельную папку. Конечно, можно не размещать скрипты на своем сайте, а обращаться непосредственно к библиотеке jQuery, но это неудобно.

СубботникТеперь попробуем применить jQuery для создания фотогалереи. Для этого воспользуемся популярным скриптом LightBox, действие которого показано на рисунке (изображение кликабельно).

Разработал этот плагин в 2008 году веб-дизайнер Бенджамин Лаптон (Benjamin Arthur Lupton).

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

Для создания фотогалереи необходимы два скрипта из библиотеки jQuery - файлы jquery-1.2.6.js и jquery.lightbox.js, а также файл стилевого оформления lightbox.css. Скачать файлы можно с официальной страницы jQuery, но, чтобы не утомлять вас поиском, они помещены здесь.

Сначала создадим на сайте папку scripts и распакуем в неё скачанный архив с файлами. В этом архиве есть ещё папка lightbox_img, в которой находится несколько вспомогательных изображений: вперед, назад и загрузка - их тоже необходимо разместить в папке scripts. Изображения, естественно, вы можете изменять самостоятельно на свой вкус.

Теперь в теге <head> на странице фотогалереи укажем путь ко всем созданным файлам и скрипт для инициализации фотогалереи:
<script type="text/javascript" src="scripts/jquery-1.2.6.js"></script>
<script type="text/javascript" src="scripts/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/lightbox.css" />
<script type=
"text/javascript">
$(document).ready(function(){
$("gallery a").lightbox(); // Выбор всех ссылок, содержащих lightbox в атрибуте rel
$.Lightbox.construct({
"speed": 500, // скорость разворачивания изображений (мс)
"opacity": 0.5, // прозрачность фона (от 0 до 1)
text: {
image: "Фото",
of: "из",
close: "Закрыть",
closeInfo: "Завершить просмотр",
help: {
close: "Закрыть",
interact: "Подсказка для блондинок"
}
}
});
});
</script>

Галерея LightBox имеет некоторое количество пользовательских настроек, с помощью которых можно изменять вывод изображений. Их можно найти и изменить в файле jquery.lightbox.js, но для этого необходимы начальные знания JavaScript. Так как предполагается, что мы с этим зверем абсолютно не знакомы, то для удобства основные из них включены в скрипт инициализации, который мы разместили в теге <head>.

Значения параметров, которые вы можете менять, снабжены подсказками и не вызывают трудностей при замене. Результат всегда можно посмотреть в браузере, открыв вашу страницу с фотогалереей. Обратите внимание на параметр gallery a. Он указывает, какие ссылки на изображения будут включены в фотогалерею. То есть, вам надо задать class="gallery" для контейнера с картинками в фотогалерее (table, div и др.) В нашем случае поместим их в таблицу:

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

Результат показан на рисунке. При клике по любому изображению откроется фотогалерея.

Строки таблицы состоят из ссылок на изображения фотогалереи: полноразмерные (big) и миниатюры-превьюшки (small). Картинка-миниатюра заключена в тег <а>...</a>, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – lightbox. Для фотогалереи из нескольких изображений к нему необходимо добавить произвольный суффикс, в данном случае - one. Он указывает программе-обработчику, какие изображения объединять в одну галерею. Назначая разные суффиксы, вы можете создать несколько галерей на одной странице. Если же вы просто хотите вывести одно увеличенное изображение, то суффикс не нужен. При этом на увеличенном изображении отсутствуют стрелки вперед/назад, как показано на рисунке в начале статьи.

Описанный пример демонстрирует использование LightBox jQuery для создания простейшей фотогалереи. В настоящее время этот скрипт значительно обновлен. На его основе создано много клонов, улучшающих вид фотогалереи и имеющих дополнительные функции, например, вывод не только фото, но и видео, демонстрацию слайд-шоу и др. Для работы с ними также не надо быть "семи пядей во лбу", но желательно осознанно подходить к их применению, а не слепо копировать скрипты. Из-за этого довольно часто в фотогалереях мы видим надписи и всплывающие подсказки на английском языке, а текст на рисунках вроде Next или Prev.

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

16.04.2013 г.

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

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






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

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