AJAX-решений для создания красивых галерей больше, чем много. В данной заметке я хотел бы оббежать ту часть галерей, которую позволяет нам сделать библиотека jQuery. Все галереи я разделил по схожести (и не схожести – прим.ред.) на несколько групп.
jQuery LightBox и аналоги
-
jQuery Lightbox пожалуй самая известная из всех. Изначально она вроде как появилась в связке с библиотекой Prototype, но со временем прижилась и у jQuery. Очень хорошая галерея. Использовал её в нескольких проектах, например .
Я бы назвал Interface Imagebox как “Найди 5 отличий от jQuery Lightbox”. Этим всё сказано
.
- ThickBox позволяет делать галереи наподобие jQuery Lightbox, но при этом позволяет работать не только с изображениями, но и с различным контентом. Например, можно делать всплывающие формы авторизации или ещё что.
-
FancyBox. Описание галереи читать у ThickBox .
jQuery слайдеры и карусели
-
jQuery Image Strip. Галерея представляет из себя слайдер: щёлкаем по циферкам, прокручиваются слайды. В общем коробочка со слайдами, смотрится симпатично, применение найти можно.
-
jQuery slideViewer похож на предыдущего коллегу, но отличается некоторой большей гибкостью настроек и возможностей. При наведении на циферку появляется заголовок изображения.
-
jQuery Gallery Scroller (jqGalScroll) похож на предыдущую галерею. В статье (по ссылке "Инфо") можно видеть пример, где отсутствует анимация прокручивания слайдов. Однако если посмотреть страницу ниже, то будет ссылка на пример, где это реализовано (можно посмотреть по ссылке "Пример").
-
jCarousel Lite - это приятный простой слайдер: клацаем влево или вправо, и маленькие картинки перемещаются туда-сюда. 2кб удовольствия. Практика показала, что довольно успешно сочетается с jQuery Lightbox (посмотреть пример можно ). В общем я попробовал, остался доволен.
-
jCarousel. Продвинутая версия карусельки jCarousel Lite. Позволяет также работать и с текстом.
-
jQuery ScrollShow. jQuery ScrollShow - это слайдер-каруселька. Похожа на предыдущие два экземпляра.
-
jQuery SerialScroll. От автора предыдущего скрипта. Примеры воодушевили и очень понравились. По сути такой же как и в предыдущих трёх пунктах слайдер, но позволяет работать с абзацами текста, что смотрится очень даже эффектно. jQuery SerialScroll очень неплоха. .
-
Photo Slider. Слайдер, уже немного другого типа: есть полоска с миниатюрами изображений, клацая по которым вспециальный блок подгружается оригинальное изображение. Photo Slider позволяет делать слайдшоу – клацаем по кнопке play и наслаждаемся видами.
-
EOGallery. Галерея, очень похожая на предыдущую, но имеющее два превью. Прокручивая галерею, просматриваемое изображение, по отношению к предыдущим, увеличено по размеру. А если понадобится рассмотреть детали, то кликнув по фотографии можно увидеть её полностью. Название и описание изображения можно указывать – будут обновляться в отдельном блоке.
Галереи по классике
По классике это те, которые представляют собой список миниатюр, клацая по которым в какой-то блок загружается картинка.
-
jQuery Gallery View II (jqGalView II). Самая простая из таких галерей. И что самое забавное, самая багнутая. По крайней мере пример такой. Кликнув по фотографии никакой таймер не отобразится и надо партизански выждать загрузки фотографии. Неудачное решение. Возможно всё можно настроить, но вот не знаю насколько это реально.
-
. Третья версия предыдущего плагина. С анимацией переключает фотографии. Неплохое решение. Вот только непонятно почему автор удалил про него статью и в итоге он теперь недоступен. Возможно это временно, а быть может и нет
-
j-Gallery. Галерея одного японца. Простота полная. Во время загрузки фотографии отображается значок загрузки.
Другие галереи
-
jQuery Cycle. Есть одно изображение, которое при помощи различных анимаций сменяется другим. Вроде очень даже стабильный плагин, применения так и просит в каких-нибудь шапках и боковых панелях.
-
jQuery Thumbs. Превращает налету крупные изображения в превью. Актуальность этого плагина не очень понимаю.
-
jQPanView. Есть блок, в углу которого расположена миниатюра, водя мышкой по которой в самом блоке видна увеличенная той или иной части изображения. Что-либо касательно применения сложно сказать, учитывая то, что плагин какой-то нестабильный, иногда слетает.
-
Lazy Load Images. Плагин для случаев, когда на странице много рисунков. Он делает такую вещь, что прокручивая вниз страницу, появляющиеся изображения как бы всплывают. Смотрится эффектно, приятная штука.
Кислая малина
Не стал включать в список два плагина, потому что их использование сомнительно из-за тормознутости. Первый – . Делает блок с полосой прокрутки, что очень напоминает меню на сайте Apple. Всё бы хорошо, но вот пример так тормозит, просто ужас. Конечно можно было бы попробовать не вставлять туда видео, а взять 5-10 изображений, но что-то подсказывает, что это не поможет (да ты может и не прав, батька – прим.ред.). А второй – . Лично у меня он тормозит как и предыдущий. Конечно может примеров много на страницу закинуто, но всё таки это не дело.
Послесловие
Галерей много, есть что выбрать, есть что сочетать. Есть также галереи не связанные с jQuery и порой значительно отличающиеся, но о некоторых из них я напишу как-нибудь потом. Впрочем, несколько галерей мы рассмотрим потом на примерах. А пока, до новых встреч=).
(голосов: 9, средний: 5.00 из 5)Похожие записи:
- +7 AJAX галерей для jQuery
- Галерея NextGen Gallery для Wordpress. Часть 1. Почему NGGallery?
- Анимированное меню на jQuery в стиле "как флэш"
- Улучшаем AJAX галерею jQuery Lightbox (часть 1) – добавляем поля заголовка и даты
- Улучшаем AJAX галерею jQuery Lightbox (часть 2) – подгон изображения по ширине и высоте браузера
Загрузка ...
11/11/2009 at 7:37 Постоянная ссылка Цитировать
с вордпресом их трудно склеивать?
11/11/2009 at 9:43 Постоянная ссылка Цитировать
В принципе их встраивать, как и в любой движок, особых проблем возникать не должно. Конечно, какую бы простую вещь мы ни делали, всегда может возникнуть какой-то подводный камень, да и никто от ошибок не застрахован.
По поводу вордпресса в частности – не вижу никаких сложностей в их внедрении – берёшь шаблон, прописываешь туда всё, что надо, и вуаля.
27/02/2010 at 2:36 Постоянная ссылка Цитировать
Я бы назвал Interface Imagebox как “Найди 5 отличий от jQuery Lightbox”. Этим всё сказано .
Нашел где подгонка по высоте ширине браузера??????
27/02/2010 at 10:06 Постоянная ссылка Цитировать
Насколько помню, Лайтбокс по умолчанию подгоняет по ширине и высоте. Или нет? Просто я могу его спутать с галереей Highslide, т.к. работаю то с одной, то с другой. Но Хайслайд не на jQuery, а отдельно.
06/04/2010 at 8:45 Постоянная ссылка Цитировать
Здравствуйте, у меня вопрос, можно прикрутить к плагину jCarousel Lite автоматическую смену изображении через определенное время.
Знаю, такое может jCarousel, но он слишком сложен для меня ):, и ставить такую махину всего лишь для простой прокрутки не вижу смысла.
06/04/2010 at 9:06 Постоянная ссылка Цитировать
Разобрался сам, там на оф. сайте есть настройки
06/04/2010 at 9:17 Постоянная ссылка Цитировать
Есть =)
Вообще хорошая карусель. Мелкая и эффективная
17/04/2010 at 16:35 Постоянная ссылка Цитировать
Спасибо очень пригодилось
17/04/2010 at 19:16 Постоянная ссылка Цитировать
Всегда пожалуйста =)
07/05/2010 at 18:31 Постоянная ссылка Цитировать
Скажите, в чем может быть причина: тормозит прокрутка изображений на сайте. У меня галерея из двух окон: в верхнем большое изображение со стрелками влево/вправо, под ним скролл из небольших копий с прокруткой???
07/05/2010 at 20:24 Постоянная ссылка Цитировать
какой браузер? было бы хорошо ещё посмотреть пример.
в принципе причиной может быть много что – начиная от самих скриптов и корректности их внедрения, заканчивая производительностью Вашего компьютера. Как вариант ещё – конфликт с другими скриптами. В общем, смотреть надо.
11/05/2010 at 17:29 Постоянная ссылка Цитировать
Александр, спасибо, можно я на мыло скину вам ссылку на сайт?
11/05/2010 at 19:35 Постоянная ссылка Цитировать
Да, конечно
12/05/2010 at 15:46 Постоянная ссылка Цитировать
Простите… а после скачки jCarousel Lite нужно его как то сжимать или мне будет достаточно его только переименовать из jcarousellite_1.0.1.pack.js в jcarousellite.js?
12/05/2010 at 16:49 Постоянная ссылка Цитировать
нет, ничего постороннего делать не надо. достаточно прописать путь либо к любому из js файлов архива. Версия pack хороша тем, что она уже сжата, поэтому можно её спокойно использовать
13/05/2010 at 10:13 Постоянная ссылка Цитировать
Поковырялся я с ней вчера… так и не смог разобраться как сделать ее горизонтальной и как ее сделать так что бы при нажатии на привьюшку, с боку появилась большая картинка
13/05/2010 at 12:05 Постоянная ссылка Цитировать
надо детальнее изучить примеры и css. да, чтобы появлялась большая картинка, использован простой приём, где по клику на превью просто в нужное место подгружается полная картинка, то есть классическая тема. Что-то наподобие того, что я делал тут
13/05/2010 at 15:01 Постоянная ссылка Цитировать
как то проблематично в этом ковыряться не зная яваскрипт…
а есть уже сборные такие галереи с каруселькой? желательно вертикальной.
13/05/2010 at 15:21 Постоянная ссылка Цитировать
жкарусель лайт делает вертикальные – пример был там. обычная жкарусель вроде тоже.
чтобы сделать вертикальную из горизонтальной, знать js не нужно – нужно всего лишь со стилями css поковыряться.
14/07/2010 at 12:51 Постоянная ссылка Цитировать
Возник еще такой вопрос в Jкарусельки можно сделать так что бы центральная картинка была обычная а две картинки по сторонам были слегка затемнены и расположить кнопки прокрутки на них?
(аналог на флеше )
14/07/2010 at 13:00 Постоянная ссылка Цитировать
такого плагина не видел, видел только подобный – Moving Boxes (третий в списке ). Можно его попробовать доработать. Ну или свой написать. Но я не видел предлагаемый пример флэша, т.к. не скачивал. Может быть точно такой же как там и нельзя, но подобный можно точно.
14/07/2010 at 14:12 Постоянная ссылка Цитировать
к сожалению по данной ссылке пишет 404 ошибку
14/07/2010 at 14:18 Постоянная ссылка Цитировать
Нашел, но мне кажется, что она мало чем отличается от Жкарусели
14/07/2010 at 14:33 Постоянная ссылка Цитировать
не сказал бы, всё таки там другие фотографии по бокам, которые надо затемнить, т.е. чтобы было как в предложенном на флэше примере.
14/07/2010 at 16:27 Постоянная ссылка Цитировать
Спасибо, поковыряемся сегодня )
05/08/2010 at 16:23 Постоянная ссылка Цитировать
Возник такой вопрос по Photo Slider. Можно ли его привязать к папке с фотографиями ? В папке будут постоянно появляться новые фото с разными именами. Идея в том, что бы он подцеплял все что находится и появляется в этой папке невзирая на имена файлов. И возможно ли сделать так, чтоб он сам автоматом представлял миниатюрные изображения из полноразмерных.
Буду очень рад любому совету или ссылке на то как такое можно реализовать.
05/08/2010 at 16:32 Постоянная ссылка Цитировать
Это уже вопрос создания галереи, тут надо PHP, можно в связке с MySQL. На тему изменения размера можно почитать .
Что касается скрипта в целом, то как вариант можно делать так – загружаем изображение, копируем куда надо, делаем миниатюру к нему, записываем имя файла в БД. А на сайте просто извлекать данные из БД.
09/08/2010 at 23:49 Постоянная ссылка Цитировать
Очень нужна каруселька для картинок, чтобы на шапку сайта поставить, чтобы она постоянно крутилась, показывая разные картинки. Без кликов и управления. Чтоб сама двигалась при заходе на сайт и покрасивее. Есть такая? Дайте пожалуйста ссылку, если есть.
10/08/2010 at 0:05 Постоянная ссылка Цитировать
8,9,11,12,13,ещё 17 можешь глянуть. а в седьмую посмотри.
во всех них есть автопрокрутка
10/08/2010 at 11:11 Постоянная ссылка Цитировать
Добрый день Александр! К сожалению PHP я не знаю и вряд ли сам смогу написать то что нужно. Возможно вы сможете мне помочь в данной ситуации . Если да, то не могли бы вы назвать приблизительную стоимость создания такой галереи ?
10/08/2010 at 15:52 Постоянная ссылка Цитировать
В принципе могу помочь. Нужно детально обсудить, что именно нужно, какой функционал, и исходя из этого будет цена. Предлагаю перебраться на почту. Моя везде указана, пишите, обсудим.
28/02/2011 at 13:33 Постоянная ссылка Цитировать
Вот еще интересный вопрос – есть ли карусельки наподобие jCarousell но в которых можно было бы сделать непрерывное движение и менять его направление встроенными функциями? Просто вот это дергание jCarousell при прокрутке раздражает, а так просто равномерно сменяются картинки.
28/02/2011 at 13:57 Постоянная ссылка Цитировать
ммм, хотелось бы уточнить – нужно, чтобы по нажатии кнопки плавно передвигалась карусель? или что-то типа при наведении плавно ползли картинки?
28/02/2011 at 13:59 Постоянная ссылка Цитировать
Мне проще показать пример на флешэ, который хотелось бы повторить.
– вот там слева есть галерея “Наши врачи”. Возможно ли реализовать что-то похожее?
28/02/2011 at 14:03 Постоянная ссылка Цитировать
Да, такое точно возможно, но адекватных галерей мало. Буду дома, посмотрю ссылки, где-то было, тогда сегодня или завтра выложу.
28/02/2011 at 14:05 Постоянная ссылка Цитировать
Буду премного благодарен. Я видел реализации подобного на mootools, но мешать на одном проекте два фреймворка бы не хотелось.
01/03/2011 at 23:39 Постоянная ссылка Цитировать
Вторая думаю то, что надо
02/03/2011 at 20:20 Постоянная ссылка Цитировать
А почему нет ???Она лучше чем ThickBox или FancyBox ???
02/03/2011 at 20:36 Постоянная ссылка Цитировать
Всё просто – статья была написана полтора года назад. Я уже давно несу в себе цель написать более полную статью по галереям jQuery, у меня уже есть их подборка и КолорБокс среди них уже есть. Обещаю, я рано или поздно точно доберусь написать пост типа “50 галерей на jQuery и ни каплей меньше” =)
03/03/2011 at 10:11 Постоянная ссылка Цитировать
У меня еще один вопрос, ColorBox лучше или хуже чем ThickBox или FancyBox
03/03/2011 at 10:40 Постоянная ссылка Цитировать
Лучше или хуже – это дело вкуса, конечно. Но лично я отдал бы предпочтение именно КолорБоксу, по нескольким причинам. Большой функционал, возможности и много примеров на сайте “производителя” (хотя главное тут именно примеры – прежде всего по ним оцениваешь что тебе надо). Плюс разработчики позаботились над оформлением – выглядит оно получше, чем у двух других плагинов. СикБокс, к примеру, выглядит немного деревянно. Конечно, я особо не вглядывался, да и работал по существу только с фансибоксом, поэтому не могу сказать на тему удобства работы какой лучше. Но в ближайшем проекте с галереями я буду пробовать именно колор.
03/03/2011 at 10:52 Постоянная ссылка Цитировать
Спасибо за совет.
03/03/2011 at 10:53 Постоянная ссылка Цитировать
Всегда пожалуйста
06/06/2011 at 11:49 Постоянная ссылка Цитировать
Я вот думаю: причём тут AJAX вообще?
30/06/2011 at 1:19 Постоянная ссылка Цитировать
Очень хочу найти слайдер как на ВиО Какой подойдет из перечисленных? Помогите найти плиз.
30/06/2011 at 9:41 Постоянная ссылка Цитировать
А что такое вио? вирус иммунодифицита у обезьян? =)
30/06/2011 at 12:29 Постоянная ссылка Цитировать
Да ну – нет.
Какие вирусы? Я не коварный умник – я лишь добрый глупец. ВиО – это вопросы и ответы от Гугл. Там на заглавной слайдер у них красивый. Такой же хочу для своей aqula.ru
30/06/2011 at 13:09 Постоянная ссылка Цитировать
Аааа =). Ну, надо смотреть плагинов побольше, но думаю., что можно переделать jQuery SerialScroll
04/07/2011 at 11:08 Постоянная ссылка Цитировать
спасибо, буду разбираться…
04/07/2011 at 11:29 Постоянная ссылка Цитировать
всегда пожалуйста! =)
09/06/2012 at 23:30 Постоянная ссылка Цитировать
скажите как можно разместить lightbox и jcarusel на одной странице? когда они на одной странице они конфликтуют
10/06/2012 at 8:34 Постоянная ссылка Цитировать
Ответ на вопрос как – спокойно. Они не конфликтуют. Покажите ваш пример, посмотрим, что вы сделали не так.
11/07/2012 at 12:01 Постоянная ссылка Цитировать
Многие ссылки уже поотвалились…
11/07/2012 at 12:15 Постоянная ссылка Цитировать
Это да, но и статья старая… У меня зреет расширенная большая статья по галереям на jquery, но пока руки не доходят
10/03/2016 at 11:19 Постоянная ссылка Цитировать
Огромное вам пасибо! а еще посты на эту тему будут в будущем?
10/03/2016 at 11:21 Постоянная ссылка Цитировать
Спасибо!
Планировались когда-то, но шанс того, что они будут меньше процента. Работы по блогу заморожены и пока непонятно буду ли развивать блог дальше. Скорее нет, чем да, а если и буду, то он скорее будет уже не программерский.