Как построить картинную галерею без единого гвоздя?
Допустим, вы - крутой фотограф. Или крутой художник. Или, в конце-концов, купили по дешевке хорошую зеркальную камеру с большим объективом ™ и хотите выложить свои фотографии в интернет на обозрение публики. Тут два варианта: либо у вас уже есть правильный хостинг, либо его у вас еще нет =) Если нет - ваш путь лежит на всякие разные фотосайты, fotki, flickr и прочие picasa. если говорить про чужой хостинг, мне лично нравится fishup, правда там есть ряд ограничений в бесплатном аккаунте.
Если у вас есть хостинг, можно попробовать разместить собственную галерею: тут от выбора начинают разбегаться глаза, поскольку вариантов технической реализации -уйма. Тут и масса phpMy*-style галерей, надстроек к различным форумным движкам, наконец - галерей, построенных при помощи Flash. PHP, как средство построения, хорош всем, за исключением необходимости поддержки его на хостинге (что, правда, уже весьма распространено) и, галереи, построенные на PHP как правило требуют наличия базы MySQL, что немного сложнее. С другой стороны, flash-галереи можно кидать где угодно, но требуется знание ActionScript. Кроме того, не всегда возможно отредактировать исходник - например, если автор не распространяет *.fla файл в составе галереи.
Выход из ситуации - CSS/DHTML/Javascript - эта связка не требует серверной поддержки, и, на мой взгляд, значительно более изящна чем все вышеперечисленные. Огромный плюс всех перечисленных решений - они все значительно красивее галерей, которые предлагает, например, narod.ru. Поэтому, имея фотографии на народ.ру, достаточно использовать любой из перечисленных ниже скриптов, чтобы заиметь действительно красивую фотогалерею. Проблема у такого подхода всего одна: совсем старые браузеры могут некорректно отображать или вовсе не отображать вашу галерею. Но таких браузеров, к счастью, уже не так много =
Впрочем, к делу: вашему вниманию обзор ряда фотогалерей и сопутствующих решений, построенных на CSS/DHTML/Javascript. Да, чуть не забыл: превьюшки для галерей, скорее всего, придется генерить самостоятельно ![]()
1. Lightbox 2
Ненавязчивый скриптик, позволяющий отображать картинки поверх открытой страницы. Поддерживает серии изображений и крайне прост в использовании. Простота, помимо всего, открывает широкие горизонты для доработчиков напильником, позволяя интегрировать скрипт в более сложные проекты.

2. Imago
Скрипт галереи, построенный на mootools. Умеет показывать картинки как из папки на сервере, так и с Flickr. Как утверждает автор, его миссия - сделать простую в использовании, но достаточно хорошо настраиваемую галерею.

3. Adobe Spry Photo Gallery
С удивлением для себя обнаружил очередной AJAX-фреймворк - Adobe Spry. Подозреваю, что он - тема для отдельного обзора, но сейчас имею предложить вниманию читателя фотогалерею, построенную с помощью этого фреймворка. Судя по всему, это не самый простой путь, но возможности открывает достаточно широкие. Взгляните сами:

Под катом - еще пять вариантов фотогалереи без применения PHP или любого другого серверного языка =)
4. FrogJS
Вы занимаетесь репортажной съемкой? Никаких проблем =) Сосредоточьтесь на выборе фототехники, а оформление фотоисторий доверьте FrogJS - эта библиотека идеально подходит для тех, кто хочет показывать постраничные репортажи. Очень просто устанавливается, поддерживает изображения любых размеров, и, по заверению автора умеет работать даже с выключенным javascript. Проверено со следующими браузерами:
- Internet Explorer 6
- Internet Explorer 7
- Firefox 2.0
- Safari 2.0
- Opera 9.1

5. jQuery slideViewer
Плагин для jQuery, позволяющий строить галерею с прокруткой из единственного немаркированного списка html:
<div id="mygalleryinpost10.12.2006" class="svw">
<ul>
<li><img src="picts/10.jpg" alt="my description for this image" /></li>
<li><img src="picts/08.jpg" alt="this is my dog..." /></li>
<li><img src="picts/03.jpg" alt="my dog eating the cat" /></li>
<li><img src="picts/05.jpg" alt="my r/c helicopter crashing..." /></li>
<!--etcetera-->
</ul>
</div>

Навороченная надстройка над mootools: умеет показывать наборы галерей, слайд-шоу и прочие прелести. При этом достаточно симпатично выглядит и имеет возможность настройки переходов между изображениями. Как и предыдущие, использует семантически правильный html для форматирования.

7. Suckerfish HoverLightbox
Смотрелка, построенная на меню Suckerfish, описанных на ALA и галерее Hoverbox Image Gallery написанной Натаном Смитом из SonSpring. О hoverbox речь ниже, а пока - Suckerfish HoverLightbox:

Выпадающие меню из картинок - это круто. А когда еще и перекат (hover) есть и работает, как показано на скриншоте - это совсем круто
Традиционно, используется семантическая разметка, имеется возможность использования при выключенном javascript.
Одна из самых пожилых галерей подобного рода - на нее ссылается масса источников и, что интереснее, многие описанные здесь скрипты навеяла авторам именно эта разработка. Кроссбраузерность, как следствие, на высоте. Традиционно, семантически правильный html внутри и великолепный вид снаружи.

![]()
Записи по теме:
- Сказка про Красную шапочку Шикарный пример инфографики - Сказка про Красную шапочку. Slagsmålsklubben -...









27 Комментариев
January 17th, 2008
Отличный обзор спасибо.
В избранное.
January 17th, 2008
Денис, рад, что понравилось - я старался, честно =) Приходите еще или подписывайтесь)
January 17th, 2008
Ничо так
January 18th, 2008
Очень понравился Spry. Скачал и на базе примеров построил простенькую галерейку. На компе все отлично работает. Выгрузил на пару серваков где у меня есть хостинг. Не работает. Сам в этом деле практически ноль, может подскажете в чем грабли?
Посмотреть на мои “труды” можно здесь http://uncle-sko.narod.ru/
January 18th, 2008
Олег, глянул firebug’ом - тот говоритъ, что нету (404) файла galleries/SKO/photos.xml. Попробуйте положить его на место =)
January 18th, 2008
Лежит он на месте. Попробовал все привести к нижнему регистру, не помогло.
ОК, спасибо за наводку, попробую с помощью файрбага разобраться.
January 18th, 2008
Да дело в регистре было.
Просто сайт наверное куда-то зеркалится и изменение кода сразу не помогло. Изменил регистр каталога и заработало.
January 18th, 2008
Есть мнение, что народ весь имеет задержку из-за кэширования.
February 28th, 2008
Вот склепал по образу и подобию Adobe Spry на js, xml и css фотогалерею http://sko.by.ru/IA-31
Все замечательно работает. Хотел добавить комментарии к снимкам. В photo.xml подобавлял в конце блока photo поле comm
В index.html добавил {@comm}
внутрь …
Со всеми снимками выводится комментарий от первой фотки и то как-то некрасиво приклеенный к низу рамки.
Начал рыть глубже. Картинка вроде выводится функцией SetMainImage(imgPath, width, height, tnID) в gallery.js
Но в javascripts практически ноль и как туда прицепить поле comm пока не соображу.
Может, если это не сложно и не отнимет много времени, подскажите хоть в каком направлении рыть или что почитать. А то я по скриптам и css немного всякой ерунды начитался, но пока без толку.
February 28th, 2008
Сори, все блоки с кодами, которые я вставлял в предыдущем сообщении, пообрезало
March 4th, 2008
Аня, merci. Значит, не зря пишу.
Олег, напишите мне в мыло - cyrill в домене, на котором расположен этот блог. Попробуем разобраться вместе.
April 29th, 2008
Статья классная, спасибо.
Но попытавшись прикрутить Lightbox 2 к сайту - столкнулся с проблемой - картинка не открывается поверх страницы с эффектами, а просто в этом же окне на белом фоне. Вот ссылка http://madlen.bplaced.net/gallery.html
там внизу страницы ссылка image #1
Пардон за беспокойство
April 29th, 2008
Еще раз извините, не разобрался - просто напутал со ссылками на скрипты )
April 29th, 2008
holods, а симпатишно получилось =) попробуйте теперь прикрутить jQuery UI Tabs для навигации — будет совсем хорошо
May 21st, 2008
Простите за дурацкий вопрос. Впервые работаю с фотогалереей, пытаюсь сделать на основе JonDesign’s smoothgallery. Не понимаю, как сделать, чтобы общий вид был не такой черный. И как добавить фотографии? В исходнике всего 8 штук. Как увеличить число? Перерыл весь код, но как человек, не знакомый с php и скриптами, не понимаю… (((
May 21st, 2008
Антон,
Дайте ссылку на ваши эксперименты — попробуем разобраться что к чему..
July 10th, 2008
Достаточно интересное решение. Мне больше всего понравилось с Hoverbox Image Gallery . Спасибо за статейку.
August 24th, 2008
До кучи также можно упомянуть FancyZoom http://www.cabel.name/2008/02/fancyzoom-10.html
September 14th, 2008
недостаток JonDesign’s smoothgallery - не понимает русский
November 8th, 2008
Вот еще скрипт небольшой фотогалереи на Javascript
http://www.homepictures.ru/halyava/hpgallery.html , может пригодиться.
Для использования, тоже надо подготовить данные в html коде.
November 8th, 2008
Сергей, спасибо. Дойдут руки — добавлю в статью..
December 12th, 2008
Спасибо огромное за обзор!
Прикрутил девушке на сайт Lightbox 2 и второй день почти непрерывно принимаю благодарность =)))
January 31st, 2009
Огромное спасибо за материал - очень помогло!
January 31st, 2009
Alexan.Dr., заходите еще
May 4th, 2009
Спасибо большое! Статья очень помогла!
June 4th, 2009
Буду рад если добавите в обзор скрипт, разработанный нашей командой, возможно будет полезен
Javascript галерея JSImageBox
Компактный и несложный в подключении скрипт. Код скрипта занимает всего 9кб.
Трэкбеки
Добавить комментарий