www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание фотогалереи на сайте
• Создание простой фотогалереи на сайте
• Создание фотогалереи в Photoshop
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея Lightbox с библиотекой Prototype
• Изображения для сайта - размещение, эффекты, прозрачность
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Увеличение изображений. Программа Highslide JS
• Создание слайд-шоу для сайта
>> смотреть все статьи о jQuery
Фотогалерея prettyPhoto
Фотогалерея prettyPhoto (красивое фото) - один из самых удачных и популярных клонов фотогалереи LightBox (см. статью Фотогалерея jQuery - просто и красиво!). Разработчик - канадский программист Стефан Карон (Stephane Caron). Эта программа построена на основе бесплатной библиотеки скриптов jQuery и, как все продукты этой библиотеки, проста в установке и настройке. Действующий пример одного из вариантов фотогалереи prettyPhoto показан на рисунке:
 |
 |
 |
|---|
Основные достоинства фотогалереи prettyPhoto:
- возможность работы не только с изображениями, но и с видео, HTML, Flash, YouTube и iframes,
- увеличенное изображение подгоняется под размера экрана в браузере (адаптивное увеличение),
- красивая настраиваемая картинка (6 тем на выбор),
- вывод миниатюр внизу окна с навигацией,
- поддержка большинством браузеров, включая IE6: Firefox 3.0+, Google Chrome 10.0+, Internet Explorer 6.0+, Safari 3.1.1+, Opera 9+,
- режим слайд-шоу.
Установка фотогалереи prettyPhoto
Для установки фотогалереи prettyPhoto сначала создадим на сайте новую папку, назвав её, чтобы не путаться, prettyphoto. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней три вложенных папки: скрипты (js), вспомогательные картинки (images) и таблица CSS (css). Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации фотогалереи prettyPhoto:
<script src="prettyphoto/js/jquery-1.8.3.min.js" type="text/javascript" ></script>
<link rel="stylesheet" href="prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />
<script src="prettyphoto/js/jquery.prettyPhoto.js" type="text/javascript" ></script>
<script type="text/javascript" >
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Всё, на этом установка фотогалереи закончена. Осталось разместить на странице сайта нужные изображения. Как обычно, каждое из них должно быть представлено в виде миниатюры (например, small.jpg) и полноразмерной картинки (big.jpg), на которую указывает ссылка с миниатюры. Размещаем их в соответствие с дизайном сайта (в нашем случае - это контейнер <table>...</table>).
Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то prettyphoto может подгонять (уменьшать) его под размер экрана (параметр allow_resize: true/false в настройках). При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.
Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".
Для того, чтобы фатогалерея заработала, необходимо в ссылки добавить атрибут rel="prettyPhoto[gallery1]". Здесь в квадратных скобках указан идентификатор галереи. Он может иметь любое имя. Если на странице сайта несколько фотогалерей, то оно должно быть одинаковым для всех элементов каждой галереи. Для вывода одиночного изображения идентификатор можно не указывать.
Следовательно, для показанной вверху фотогалереи имеем следующий простой HTML-код:
<table width="90%" border="1" align="center" cellpadding="3" cellspacing="0" bgcolor="#FFCC99" >
<tr >
<th width="33%" ><a href="big_01.jpg" rel="prettyPhoto[gallery1]" title="Субботник"><img src="small_01.jpg" alt="Фотогалерея prettyPhoto" width="160" height="107" /></a></th>
<th width="34%" ><a href="big_02.jpg" rel="prettyPhoto[gallery1]" title="Выездная торговля"><img src="small_02.jpg" alt="Фотогалерея prettyPhoto" width="160" height="107" /></a></th>
<th width="33%" ><a href="big_03.jpg" rel="prettyPhoto[gallery1]" title="Гена и Чебурашка"><img src="small_03.jpg" alt="Фотогалерея prettyPhoto" width="160" height="107" /></a></th>
</tr>
</table>
Настройка фотогалереи prettyPhoto
В заключение, несколько слов про настройки фотогалереи. Обратите внимание, что в атрибуте title ссылок размещен текст, который показывается под картинкой в фотогалерее, а содержимое alt картинок показывается вверху (можно отключить в настройках). Для изменения внешнего вида (темы), скорости смены картинок, прозрачности фона и др. используются параметры в файле jquery.prettyPhoto.js. Откройте его, например, в Adobe Dreamweaver или Блокноте, и в самом начале страницы увидите все настройки:
animation_speed: 'normal', /* Скорость анимации при загрузке и смене фото fast/slow/normal */
ajaxcallback: function() {},
slideshow: 3000, /* Время показа слайд-шоу: false или интервал в миллисекундах */
autoplay_slideshow: false, /* Автозапуск слайд-шоу true/false */
opacity: 0.70, /* Прозрачность фона от 0 до 1 */
show_title: true, /* Вывод содержимого ALT изображений вверху галереи true/false */
allow_resize: true, /* Обрезка больших изображений по размеру экрана true/false */
allow_expand: true, /* Разрешить пользователю менять размеры изображений true/false */
default_width: 500,
default_height: 344,
counter_separator_label: ' из ', /* Разделитель между номерами фото */
theme: 'facebook', /* Темы галереи: light_rounded, dark_rounded, light_square, dark_square, facebook, pp_default*/
horizontal_padding: 20, /* Отступы по краям */
hideflash: false, /* Скрытие flash на странице, чтобы они не отображались поверх галереи */
wmode: 'opaque', /* Установка атрибутов flash wmode */
autoplay: true, /* Автоматический старт видео: true/false */
modal: false, /* Если true, то закрыть окно можно только кнопкой close */
overlay_gallery: true, /* Вывод превьюшек внизу картинки при наведении мыши, отмена - false */
overlay_gallery_max: 30, /* Максимальное число превьюшек внизу картинки */
Для удобства все пункты снабжены комментариями на русском языке, и вы можете поэкспериментировать, изменяя их.
Например, на выбор предлагается шесть основных тем оформления фотогалереи: light_rounded, dark_rounded, light_square, dark_square, facebook, pp_default. Для нашего примера выбрана тема facebook.
При наведении курсора на картинку в окне появляется галерея миниатюр-превьюшек, по которым можно кликать для быстрого перемещения. В настройках можно задать максимальное их число или отменить показ, задав false для пункта overlay_gallery. Аналогично можно менять и остальные функции prettyPhoto. После внесения изменений и сохранения файла, вы можете просматривать результат в любом браузере.
Вспомогательные картинки (вперед, назад, выход и др.) расположены в папке images, и их также можно изменять на ваше усмотрение. Особенно, это касается изображений с англоязычными надписями.
Подводя итог, скажу, что фотогалерея prettyPhoto уже много лет пользуется популярностью у разработчиков сайтов. Это обусловлено простотой установки этого плагина jQuery, оптимальными настройками, наличием слайд-шоу и поддержкой большинством браузеров. Также отмечу, что разработчик программы Стефан Карон постоянно её совершенствует и добавляет новые возможности, о чем рекомендую почитать на его сайте. Заодно, бесплатно потренируетесь в своем английском.
Кроме вывода изображений, prettyPhoto может работать и с другим контентом. Например, вывод HTML-страницы рассмотрен в статье "Применение Jquery для формы обратной связи".
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
11.05.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru