www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея Lightbox с библиотекой Prototype
Говоря о программах создания фотогалерей на сайте, обязательно надо вспомнить старый, но до сих пор популярный скрипт LightBox с плагином Рrototype. Он прост в установке, позволяет объединять изображения в группы и просматривать их в режиме галереи, имеет достаточный набор настроек (прозрачность фона, скорость смены изображений, создание своих картинок для кнопок вперед/назад/закрыть и др.). и отлично подойдет для сайтов, где уже используется библиотека Prototype. Пример его работы показан на рисунке:
 |
 |
 |
|---|
LightBox с плагином Рrototype понравится любителям работать с CSS, где можно менять множество параметров. Кроме того, для инициализации этого скрипта не требуется устанавливать класс для контейнера с изображениями, а достаточно ввести атрибут rel="lightbox" в тег ссылки. Установка на сайт фотогалереи LightBox с плагином Рrototype аналогична описанной ранее jQuery LightBox:
- Скачиваете архив с необходимыми файлами. Это 5 скриптов (lightbox.js, prototype.js, scriptaculous.js, effects.js, builder.js), файл стилей СSS - lightbox.css и папка с вспомогательными изображениями - images.
- Создаете папку scripts в том же каталоге (папке), где расположена страница с фотогалереей, и распаковываете в неё скачанный архив.
- В теге <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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru