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

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

Логотип Софт

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

Фотогалерея Lightbox с библиотекой Prototype

Говоря о программах создания фотогалерей на сайте, обязательно надо вспомнить старый, но до сих пор популярный скрипт LightBox с плагином Рrototype. Он прост в установке, позволяет объединять изображения в группы и просматривать их в режиме галереи, имеет достаточный набор настроек (прозрачность фона, скорость смены изображений, создание своих картинок для кнопок вперед/назад/закрыть и др.). и отлично подойдет для сайтов, где уже используется библиотека Prototype. Пример его работы показан на рисунке:

Субботник Выездная торговля Гена и Чебурашка

LightBox с плагином Рrototype понравится любителям работать с CSS, где можно менять множество параметров. Кроме того, для инициализации этого скрипта не требуется устанавливать класс для контейнера с изображениями, а достаточно ввести атрибут rel="lightbox" в тег ссылки. Установка на сайт фотогалереи LightBox с плагином Рrototype аналогична описанной ранее jQuery LightBox:

  1. Скачиваете архив с необходимыми файлами. Это 5 скриптов (lightbox.js, prototype.js, scriptaculous.js, effects.js, builder.js), файл стилей СSS - lightbox.css и папка с вспомогательными изображениями - images.
  2. Создаете папку scripts в том же каталоге (папке), где расположена страница с фотогалереей, и распаковываете в неё скачанный архив.
  3. В теге <head>...</head> на странице фотогалереи указываете путь к новым файлам:
    <script type="text/javascript" src="scripts/prototype.js"></script>
    <script type="text/javascript" src="scripts/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="scripts/lightbox.js"></script>
    <link rel="stylesheet" href="scripts/lightbox.css" type="text/css" media="screen" />

Далее размещаем на странице сайта изображения, оформляя их в соответствие с нашими желаниями и способностями. Все изображения должны быть двух видов: полноразмерные (big) и миниатюры-превьюшки (small) и заключены в тег <а>...</a> с атрибутом rel. Для объединения нескольких картинок в одну галерею, необходимо добавить в квадратных скобках их идентификатор - любое слово (в нашем примере, one):
<a href="big_01.jpg" rel="lightbox[one]" title="Описание картинки"><img src="small_01.jpg" alt="" width="..." height="..." /></a>.

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

<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFCC99" >
<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>

Если вам необходимо разместить на странице несколько фотогалерей, то достаточно назначить для них разные идентификаторы, а программа сама объединит их в галерею. Если же вы просто хотите вывести одно увеличенное изображение, то идентификатор не нужен.

Для изменения настроек LightBox с плагином Рrototype надо открыть файл lightbox.js, например, в блокноте. Основные настройки сопровождаются комментариями на русском языке, и вы легко их можете изменять. Также можно заменить и вспомогательные картинки - они находятся в папке Images.

К сожалению, данный скрипт работает только с изображениями и не может показывать другой контент (видео, Flash и т.п.), но для большинства применений это не столь существенно.

20.04.2013 г.

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






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

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