www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
PP Gallery - универсальная фотогалерея с миниатюрами.
Установка и настройка
Среди многообразия фотогалерей особое место занимают программы, в которых для перемещения по картинкам в окне просмотра используются миниатюры-превьюшки (смотрите, например, статью Фотогалерея prettyPhoto).Такой способ особенно удобен для галерей с большим числом изображений, так как последовательно листать их довольно утомительно. Можно, конечно, возвращаться обратно к исходной странице и выбирать нужную картинку, но этот способ не назовешь удачным.
Универсальная фотогалерея PP Gallery, плагин замечательной бесплатной библиотеки jQuery, позволяет легко просматривать любое количество изображений и открывать их, не выходя из окна просмотра галереи. PP Gallery имеет широкие возможности навигации, а наличие ползунка для движения по миниатюрам позволяет быстро перемещаться даже по очень большой коллекции фотографий. Кроме того, миниатюры в самом окне фотогалереи во многих случаях делают не нужным размещение их на основной странице (подробнее об этом рассказано ниже).
Фотогалерея PP Gallery имеет режим просмотра как по клику мышкой или клавишами вперед/назад, так и в виде слайд-шоу. Она проста в установке, имеет элегантный внешний вид и все необходимые настройки. Подробное описание фотогалереи PP Gallery можно посмотреть на сайте разработчиков. Действующий пример показан на рисунке:
Установка фотогалереи PP Gallery
Как обычно, начинаем с создания на сайте новой папки, назвав её, например, ppgallery. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней одна папка js со скриптами и другая с CSS-файлами.
Далее добавим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации и настройки параметров PP Gallery:
<link href="ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" />
<link href="ppgallery/css/dark-hive/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script src="ppgallery/js/jquery-1.4.4.min.js" type="text/javascript" ></script>
<script type="text/javascript" src="ppgallery/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="ppgallery/js/ppgallery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').ppGallery({
screenFade: 0.8, //прозрачность фона
screenColor: '#333333', //цвет фона
thumbWidth: 60, //ширина миниатюр-превьюшек. По умолчанию 60px
maxWidth: '700', //контроль максимальной ширины картинок (устанавливать больше самой большой)
slideShowDelay: '2', //скорость смены картинок в слайд-шоу (сек)
showHiddenGalleryButton: '', //#view - скрыть миниатюры на странице с галереей (не путать с окном галереи!)
autoOpen: 0 //запуск галереи сразу при открытии страницы (1= yes, 0= no)
});
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Для размещения изображений (больших - big.jpg и миниатюр - small.jpg) используется неупорядоченный список из обычных гиперссылок с идентификатором id="gallery":
<ul id="gallery">
<li ><a href="big_01.jpg" title="Надпись"><img src="small_01.jpg" /></a></li>
<li><a href="big_02.jpg" title="Надпись"><img src="small_02.jpg"/></a></li>
...
<li> <a href="big_N.jpg" title="Надпись"> <img src="small_N.jpg"/> </a> </li>
</ul>
Если требуется выводить надписи под изображениями, то их следует указывать в <title> гиперссылок.
На этом установка PP Gallery закончена, и вы можете запускать фотогалерею и любоваться ею в браузере. Как частенько говорят в рекламе, вы удивитесь, как всё просто и быстро... Впрочем, это характерно для большинства плагинов jQuery, которые уже несколько лет облегчают жизнь веб-дизайнеров.
Настройка параметров фотогалереи PP Gallery
Основные настройки внешнего вида фотогалереи PP Gallery находятся в элементарном CSS-файле ppgallery.css и в js-скрипте, размещенном нами в теге <head>...</head>. Русские комментарии, надеюсь, не требуют пояснений.
Так как в окне фотогалереи PP Gallery выводятся миниатюры всех изображений, то, в принципе, их дублирование на странице сайта становится необязательным. Исключение составляет только случай, если вы хотите красочно оформить фотогалерею со всякими наворотами и прибамбасами. Но зачем это делать, если кликом по любой картинке посетитель всё равно уходит в окно PP Gallery и ваши труды останутся незамеченными?
Следовательно, на странице сайта можно скрыть все изображения галереи, оставив только кнопку запуска программы PP Gallery. Для этого надо ввести значение #view в строке инициализации
showHiddenGalleryButton: '#view', //#view - скрыть миниатюры на странице с галереей
и добавить кнопку запуска фотогалереи с помощью тега <div> перед списком изображений (перед <ul>).
<div id="view">Запуск фотогалереи</div> или <div id="view"><img src="URL картинки"/></div>.
Оформление кнопки может быть любым: в виде простой надписи, кнопки, картинки и т.п. Например, такую кнопку можно сделать, используя миниатюру папки с картинками, как показано справа. Пример, опять же, рабочий, можно кликнуть!
Подведем итоги.
PP Gallery - универсальная фотогалерея, легко и быстро устанавливаемая на сайт. Она имеет привлекательный внешний вид и расширенные возможности навигации с использованием миниатюр-превьюшек, что позволяет во многих случаях отказаться от размещения изображений на основной странице фотогалереи.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
13.09.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru