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:
Для размещения на странице сайта фотогалереи используем следующую конструкцию ссылок на изображения, каждое из которых должно быть представлено в виде миниатюры (small) и полноразмерной картинки (big):
Все изображения, относящиеся к одной галерее, должны иметь одинаковые атрибуты rel и class. Если вам не нужно выводить надпись под картинкой, то оставьте для неё пустым атрибут title="". Для вывода одиночных изображений с помощью Pirobox следует использовать в ссылке атрибуты rel="single" class="pirobox". В этом случае в окне не выводятся значки вперед/назад, а только закрытие окна. Настройка фотогалереи PiroboxПри установке фотогалереи Pirobox можно выбрать один из двух стилей оформления style_1 или style_2, параметры которых определяются соответствующими правилами CSS. В наших примерах выбран второй стиль (с тенью вокруг картинок): Скорость смены картинок и прозрачность фона можно менять в скрипте, размещенном в теге <head>...</head>. Цвет фона задаётся в CSS файле выбранного вами стиля (строчка, где задаётся цвет фона, снабжена русским комментарием). Как сказано выше, кроме изображений, Pirobox может выводить в окне и другой контент, например, текст, видео, iframe, HTML и др. Для этого достаточно изменить только атрибуты rel и class. Например, для вывода простого текста необходимо указать размеры окна (ширина/высота) в атрибуте rel и имя идентификатора div, в котором размещен текст. Ссылка в этом случае может выглядеть так: Аналогично выводится и контент внешней HTML страницы. Здесь также необходимо указать в атрибуте rel размеры окна. Вывод HTML страницы удобно использовать для оформления формы обратной связи на сайте, например, следующим образом: Вывод SWF и PDF-файлов, Youtube и др. контента также не составляет труда. Подробно об этом можно посмотреть на сайте разработчика Pirobox. При выводе текстовых файлов, внешних HTML страниц и других сайтов следите, чтобы их кодировки совпадали. О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO". 23.11.2013 г. |
|||||
|
|||||
Главная | Веб-дизайн и оптимизация сайтов | Фотолаборатория | Радиотехника | Полезные программы | Разработка сайтов | |||||
Copyright © 2008 - Марк Розенталь e-mail: Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru Ключевые слова: jquery фотогалерея, скрипт фотогалереи, создание фотогалерей, бесплатная фотогалерея, Pirobox |