www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
AD Gallery - фотогалерея с миниатюрами.
Установка и настройка
Во многих случаях красивую фотогалерею на сайте можно сделать при помощи карусели с миниатюрами, которые открываются по клику в большом окне. Для создания такой галереи достаточно только средств HTML и CSS (см., например, статью Создание фотогалереи в Photoshop), но значительно больше возможностей дает применение плагинов бесплатной библиотеки jQuery. Для примера, рассмотрим фотогалерею AD Gallery, разработанную шведским программистом Anders Ekdahl.
Эта фотогалерея позволяет выбрать несколько вариантов смены изображений, выводит шкалу с миниатюрами-превьюшками и текст под картинками, имеет режим слайд-шоу, а также множество других полезных функций. Плагин корректно работает в большинстве браузеров, включая IE 7, 8 и др. Один из вариантов фотогалереи AD Gallery показан ниже (пример, как всегда, рабочий):
Установка фотогалереи AD Gallery
Сначала создадим на сайте новую папку и назовём её ad-gallery. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два js-скрипта, файл стилей CSS и несколько вспомогательных изображений.
Далее необходимо добавить в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации AD Gallery:
<link rel="stylesheet" type="text/css" href="ad-gallery/jquery.ad-gallery.css" />
<script type="text/javascript" src="ad-gallery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="ad-gallery/jquery.ad-gallery.js"></script>
<script type="text/javascript">
$(function() {
var galleries = $('.ad-gallery').adGallery();
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Для размещения изображений (больших - big.jpg и миниатюр - small.jpg) используется неупорядоченный список, вложенный в несколько тегов <div>. Для нашего примера с пятью картинками HTML-код выглядит следующим образом:
<div id="ad-gallery" class="ad-gallery">
<div class="ad-image-wrapper"> </div>
<div class="ad-controls"> </div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li> <a href="big_01.jpg"> <img src="small_01.jpg" width="160" height="107"/> </a> </li>
<li> <a href="big_02.jpg"> <img src="small_02.jpg" title="Цистерна" alt="Цистерна предназначена для розничной продажи самогона" width="160" height="107"/> </a> </li>
<li> <a href="big_03.jpg"> <img src="small_03.jpg" title="Гена и Чебурашка" alt="А где Чебурашка?" width="160" height="107"/> </a> </li>
<li> <a href="big_04.jpg"> <img src="small_04.jpg" title="Автомобиль" alt="Пример с картинкой-ссылкой" longdesc="scripts/big_04.jpg" width="160" height="107"/> </a> </li>
<li> <a href="big_05.jpg"> <img src="small_05.jpg" title="Военный автомобиль" alt="" width="160" height="107"/> </a> </li>
</ul>
</div>
</div>
</div>
Насчет значений "дивов" можете не особенно волноваться и просто скопировать весь контейнер, размещая ваши изображения в теги <li>...</li>. Количество изображений, помещенных в них, может быть любым. Обратите внимание на способ вывода надписей под увеличенными картинками: атрибут title задает общее название, а alt - развернутое описание. Для реализации ссылки-картинки используется атрибут longdesc (третье изображение).
Как видим, установка фотогалереи AD Gallery, как, впрочем, большинства плагинов jQuery, очень простая и не требует особых знаний в программировании.
Настройка параметров фотогалереи AD Gallery
Большинство настроек внешнего вида фотогалереи AD Gallery выполняется с помощью правил CSS в файле jquery.ad-gallery.css. Основные из них снабжены русскими комментариями и не имеют каких-либо особенностей, то есть сложностей.
Анимацию и другие параметры можно изменять в файле jquery.ad-gallery.js. Для этого откройте его в редакторе или в Блокноте и в самом начале увидите строчки с комментариями. Изменяя значения параметров и просматривая результат в браузере, можно настроить работу фотогалереи в соответствие с вашими задачами. Например, строчка
effect: 'slide-hori', // эффекты слайд-шоу: 'slide-vert', 'fade', 'resize', 'none','slide-hori'
определяет один из пяти вариантов переходов при смене картинок.
Размеры окна фотогалереи определяются автоматически в соответствие с самым большим изображением. Поэтому желательно, чтобы картинки не очень отличались по высоте, иначе остается много пустого места.
Фотогалерею AD Gallery удобно использовать при небольшом количестве картинок. Если же ваша коллекция состоит из сотни-другой изображений, то ждать, когда все они прокрутятся, слишком утомительно, и не всякий пользователь "долетит до середины Днепра". К сожалению, в AD Gallery не предусмотрен ползунок для быстрого перемещения по миниатюрам. Поэтому для больших фотогалерей рекомендую использовать другой плагин jQuery - PP Gallery, о котором рассказано в следующей статье.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
13.09.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru