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

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

Логотип Софт

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

Фотогалерея Pirobox

Фотогалерея Pirobox - популярный плагин jQuery, один из самых простых клонов фотогалереи LightBox (см. статью Фотогалерея jQuery - просто и красиво!). Основное его достоинство - возможность работы с самым разнообразным контентом. С помощью Pirobox вы легко сможете создавать фотогалереи и открывать любые файлы: изображения, текстовые файлы, HTML-код, внешние сайты, SWF и PDF-файлы, Youtube и др.

Разработчик Pirobox - Диего Валобра (Diego Valobra), независимый веб-дизайнер из Рима. Он специализируется на создании и продвижении веб-сайтов и сотрудничает со многими итальянскими и американскими интернет-агентствами.

Фотогалерея Pirobox имеет привлекательный внешний вид с оригинальными кнопками навигации, автоматически выполняет изменение размеров окна в зависимости от контента, позволяет выводить надписи под изображениями и поддерживается большинством браузеров: FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows), IE 7+.

Pirobox позволяет выбрать две темы внешнего вида, корректно работает с форматом PNG и не зависает при ошибках состояния ссылок (битая/не битая). Надписи под изображениями можно скрывать/выводить щелчком по картинке.

Пример использования Pirobox для фотогалереи на сайте показан на рисунке (надписи сделаны для 1 и 3 картинок):

Фотогалерея Фотогалерея Фотогалерея
Установка фотогалереи Pirobox

Для установки фотогалереи Pirobox сначала создадим на сайте новую папку, назвав её, не претендуя на оригинальность, pirobox. Эта папка должна находиться в том же каталоге, что и страница с фотогалереей. Затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней одна папка со скриптами (js) и другая с двумя стилями (CSS) и вспомогательными картинками.

Далее вставим в заголовок страницы с будущей фотогалереей внутрь тега <head>...</head> следующие строчки, указывающие пути к новым файлам, и небольшой JavaScript для инициализации и настройки фотогалереи Pirobox:

<link href="pirobox/css_pirobox/style_2/style.css" rel="stylesheet" type="text/css" />
<script type=
"text/javascript" src="pirobox/js/jquery-1.8.3.min.js"></script>
<script type="
text/javascript" src="pirobox/js/jquery-ui-1.8.2.custom.min.js"></script>
<script type=
"text/javascript" src="pirobox/js/pirobox_extended.js"></script>
<script type=
"text/javascript">
$(document).ready(function() {
$().piroBox_ext({
piro_speed : 700, // скорость смены картинок мс
bg_alpha : 0.5, // прозрачность фона
piro_scroll : true, // при прокрутке страницы окно Pirobox всегда в центре
piroFadeOut: 200 // время закрытия окна мс
});
});
</script>

Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.

Для размещения на странице сайта фотогалереи используем следующую конструкцию ссылок на изображения, каждое из которых должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big):
<a href="big.jpg" rel="gallery" class="pirobox_gall" title="Надпись под изображением"><img src="small.jpg" alt=" " width="160" height="107" /></a>.

Важное замечание: если размер основного изображения (big.jpg) больше размера экрана в браузере пользователя, то Pirobox автоматически подгоняет (уменьшает) его под размер экрана. При этом увеличенная картинка всегда вписывается в экран, независимо от того, какое устройство используется для просмотра: смартфон, планшет или монитор высокого разрешения.

Поэтому желательно, чтобы большое изображение имело запас по разрешению, например, не менее 1000 пиксел по вертикали для стандартного экрана Full HD - 1920х1080. В нашем примере, это картинка "Субботник".

Все изображения, относящиеся к одной галерее, должны иметь одинаковые атрибуты rel и class. Если вам не нужно выводить надпись под картинкой, то оставьте для неё пустым атрибут title="".

Для вывода одиночных изображений с помощью Pirobox следует использовать в ссылке атрибуты rel="single" class="pirobox". В этом случае в окне не выводятся значки вперед/назад, а только закрытие окна.


Настройка фотогалереи Pirobox

При установке фотогалереи Pirobox можно выбрать один из двух стилей оформления style_1 или style_2, параметры которых определяются соответствующими правилами CSS. В наших примерах выбран второй стиль (с тенью вокруг картинок):
<link href="pirobox/css_pirobox/style_2/style.css" rel="stylesheet" type="text/css" />.

Скорость смены картинок и прозрачность фона можно менять в скрипте, размещенном в теге <head>...</head>. Цвет фона задаётся в CSS файле выбранного вами стиля (строчка, где задаётся цвет фона, снабжена русским комментарием).

Как сказано выше, кроме изображений, Pirobox может выводить в окне и другой контент, например, текст, видео, iframe, HTML и др. Для этого достаточно изменить только атрибуты rel и class.

Например, для вывода простого текста необходимо указать размеры окна (ширина/высота) в атрибуте rel и имя идентификатора div, в котором размещен текст. Ссылка в этом случае может выглядеть так:
<a href="#inline" rel="inline-600-250" class="pirobox" title="Простой текст">Простой текст</a>.
На самой странице текст оформляется обычными средствами CSS внутри тега div, например, в показанном ниже примере <div id="inline" style="display:none; background:white;">....</div>:

Простой текст

Аналогично выводится и контент внешней HTML страницы. Здесь также необходимо указать в атрибуте rel размеры окна. Вывод HTML страницы удобно использовать для оформления формы обратной связи на сайте, например, следующим образом:
<a href="URL страницы" rel="content-400-300" class="pirobox">Написать сообщение</a>

Написать сообщение

Вывод SWF и PDF-файлов, Youtube и др. контента также не составляет труда. Подробно об этом можно посмотреть на сайте разработчика Pirobox. При выводе текстовых файлов, внешних HTML страниц и других сайтов следите, чтобы их кодировки совпадали.

О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".

23.11.2013 г.

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






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

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