20 AJAX галерей на jQuery

« Предыдущая запись
 
  Следующая запись »
 

AJAX-решений для создания красивых галерей больше, чем много. В данной заметке я хотел бы оббежать ту часть галерей, которую позволяет нам сделать библиотека jQuery. Все галереи я разделил по схожести (и не схожести – прим.ред.) на несколько групп.

jQuery LightBox и аналоги

  1. lightbox 20 AJAX галерей на jQuery jQuery Lightbox пожалуй самая известная из всех. Изначально она вроде как появилась в связке с библиотекой Prototype, но со временем прижилась и у jQuery. Очень хорошая галерея. Использовал её в нескольких проектах, например вот здесь.

     

  2. InterfaceImagebox 20 AJAX галерей на jQuery
    Я бы назвал Interface Imagebox как “Найди 5 отличий от jQuery Lightbox”. Этим всё сказано icon smile 20 AJAX галерей на jQuery .

     

  3. ThickBox позволяет делать галереи наподобие jQuery Lightbox, но при этом позволяет работать не только с изображениями, но и с различным контентом. Например, можно делать всплывающие формы авторизации или ещё что.

     

  4. FancyBox. Описание галереи читать у ThickBox icon smile 20 AJAX галерей на jQuery .

     


jQuery слайдеры и карусели

  1. jQuery Image Strip. Галерея представляет из себя слайдер: щёлкаем по циферкам, прокручиваются слайды. В общем коробочка со слайдами, смотрится симпатично, применение найти можно.

     

  2. jQuery slideViewer похож на предыдущего коллегу, но отличается некоторой большей гибкостью настроек и возможностей. При наведении на циферку появляется заголовок изображения.

     

  3. jQuery Gallery Scroller (jqGalScroll) похож на предыдущую галерею. В статье (по ссылке "Инфо") можно видеть пример, где отсутствует анимация прокручивания слайдов. Однако если посмотреть страницу ниже, то будет ссылка на пример, где это реализовано (можно посмотреть по ссылке "Пример").

     

  4. jCarousel Lite - это приятный простой слайдер: клацаем влево или вправо, и маленькие картинки перемещаются туда-сюда. 2кб удовольствия. Практика показала, что довольно успешно сочетается с jQuery Lightbox (посмотреть пример можно по ссылке). В общем я попробовал, остался доволен.

     

  5. jCarousel. Продвинутая версия карусельки jCarousel Lite. Позволяет также работать и с текстом.

     

  6. jQuery ScrollShow. jQuery ScrollShow - это слайдер-каруселька. Похожа на предыдущие два экземпляра.

     

  7. jQuery SerialScroll. От автора предыдущего скрипта. Примеры воодушевили и очень понравились. По сути такой же как и в предыдущих трёх пунктах слайдер, но позволяет работать с абзацами текста, что смотрится очень даже эффектно. jQuery SerialScroll очень неплоха. Примеры можно посмотреть тут.

     

  8. Photo Slider. Слайдер, уже немного другого типа: есть полоска с миниатюрами изображений, клацая по которым вспециальный блок подгружается оригинальное изображение. Photo Slider позволяет делать слайдшоу – клацаем по кнопке play и наслаждаемся видами.

     

  9. EOGallery. Галерея, очень похожая на предыдущую, но имеющее два превью. Прокручивая галерею, просматриваемое изображение, по отношению к предыдущим, увеличено по размеру. А если понадобится рассмотреть детали, то кликнув по фотографии можно увидеть её полностью. Название и описание изображения можно указывать – будут обновляться в отдельном блоке.

     

Галереи по классике

По классике это те, которые представляют собой список миниатюр, клацая по которым в какой-то блок загружается картинка.

  1. jQuery Gallery View II (jqGalView II). Самая простая из таких галерей. И что самое забавное, самая багнутая. По крайней мере пример такой. Кликнув по фотографии никакой таймер не отобразится и надо партизански выждать загрузки фотографии. Неудачное решение. Возможно всё можно настроить, но вот не знаю насколько это реально.

     

  2. jqGalView III. Третья версия предыдущего плагина. С анимацией переключает фотографии. Неплохое решение. Вот только непонятно почему автор удалил про него статью и в итоге он теперь недоступен. Возможно это временно, а быть может и нет icon sad 20 AJAX галерей на jQuery
  3. j-Gallery. Галерея одного японца. Простота полная. Во время загрузки фотографии отображается значок загрузки.

     

Другие галереи

  1. jQuery Cycle. Есть одно изображение, которое при помощи различных анимаций сменяется другим. Вроде очень даже стабильный плагин, применения так и просит в каких-нибудь шапках и боковых панелях.

     

  2. jQuery Thumbs. Превращает налету крупные изображения в превью. Актуальность этого плагина не очень понимаю.

     

  3. jQPanView. Есть блок, в углу которого расположена миниатюра, водя мышкой по которой в самом блоке видна увеличенная той или иной части изображения. Что-либо касательно применения сложно сказать, учитывая то, что плагин какой-то нестабильный, иногда слетает.

     

  4. Lazy Load Images. Плагин для случаев, когда на странице много рисунков. Он делает такую вещь, что прокручивая вниз страницу, появляющиеся изображения как бы всплывают. Смотрится эффектно, приятная штука.

     

Кислая малина

Не стал включать в список два плагина, потому что их использование сомнительно из-за тормознутости. Первый – jQuery Multimedia Portfolio. Делает блок с полосой прокрутки, что очень напоминает меню на сайте Apple. Всё бы хорошо, но вот пример так тормозит, просто ужас. Конечно можно было бы попробовать не вставлять туда видео, а взять 5-10 изображений, но что-то подсказывает, что это не поможет (да ты может и не прав, батька – прим.ред.). А второй – Zoomi (Zoomable Thumbnails). Лично у меня он тормозит как и предыдущий. Конечно может примеров много на страницу закинуто, но всё таки это не дело.

Послесловие

Галерей много, есть что выбрать, есть что сочетать. Есть также галереи не связанные с jQuery и порой значительно отличающиеся, но о некоторых из них я напишу как-нибудь потом. Впрочем, несколько галерей мы рассмотрим потом на примерах. А пока, до новых встреч=).

, , , ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 9, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 56 на запись

"20 AJAX галерей на jQuery"

  1. www.vottak.info
    11/11/2009 at 7:37 Постоянная ссылка Цитировать

    с вордпресом их трудно склеивать?

  2. Александр Шуйский
    11/11/2009 at 9:43 Постоянная ссылка Цитировать

    В принципе их встраивать, как и в любой движок, особых проблем возникать не должно. Конечно, какую бы простую вещь мы ни делали, всегда может возникнуть какой-то подводный камень, да и никто от ошибок не застрахован.
    По поводу вордпресса в частности – не вижу никаких сложностей в их внедрении – берёшь шаблон, прописываешь туда всё, что надо, и вуаля.

  3. Я бы назвал Interface Imagebox как “Найди 5 отличий от jQuery Lightbox”. Этим всё сказано .

    Нашел где подгонка по высоте ширине браузера??????

  4. Насколько помню, Лайтбокс по умолчанию подгоняет по ширине и высоте. Или нет? Просто я могу его спутать с галереей Highslide, т.к. работаю то с одной, то с другой. Но Хайслайд не на jQuery, а отдельно.

  5. Здравствуйте, у меня вопрос, можно прикрутить к плагину jCarousel Lite автоматическую смену изображении через определенное время.

    Знаю, такое может jCarousel, но он слишком сложен для меня ):, и ставить такую махину всего лишь для простой прокрутки не вижу смысла.

  6. Разобрался сам, там на оф. сайте есть настройки

  7. Есть =)
    Вообще хорошая карусель. Мелкая и эффективная

  8. allforboxing
    17/04/2010 at 16:35 Постоянная ссылка Цитировать

    Спасибо очень пригодилось

  9. Всегда пожалуйста =)

  10. Скажите, в чем может быть причина: тормозит прокрутка изображений на сайте. У меня галерея из двух окон: в верхнем большое изображение со стрелками влево/вправо, под ним скролл из небольших копий с прокруткой???

  11. какой браузер? было бы хорошо ещё посмотреть пример.
    в принципе причиной может быть много что – начиная от самих скриптов и корректности их внедрения, заканчивая производительностью Вашего компьютера. Как вариант ещё – конфликт с другими скриптами. В общем, смотреть надо.

  12. Александр, спасибо, можно я на мыло скину вам ссылку на сайт?

  13. Да, конечно

  14. mike.silence
    12/05/2010 at 15:46 Постоянная ссылка Цитировать

    Простите… а после скачки jCarousel Lite нужно его как то сжимать или мне будет достаточно его только переименовать из jcarousellite_1.0.1.pack.js в jcarousellite.js?

  15. нет, ничего постороннего делать не надо. достаточно прописать путь либо к любому из js файлов архива. Версия pack хороша тем, что она уже сжата, поэтому можно её спокойно использовать

  16. mike.silence
    13/05/2010 at 10:13 Постоянная ссылка Цитировать

    Поковырялся я с ней вчера… так и не смог разобраться как сделать ее горизонтальной и как ее сделать так что бы при нажатии на привьюшку, с боку появилась большая картинка

  17. надо детальнее изучить примеры и css. да, чтобы появлялась большая картинка, использован простой приём, где по клику на превью просто в нужное место подгружается полная картинка, то есть классическая тема. Что-то наподобие того, что я делал тут http://shublog.ru/ajax/jquery/skript-menyu-s-kontentom-pochti-kak-flash-svoimi-rukami-chast-2/

  18. mike.silence
    13/05/2010 at 15:01 Постоянная ссылка Цитировать

    как то проблематично в этом ковыряться не зная яваскрипт…
    а есть уже сборные такие галереи с каруселькой? желательно вертикальной.

  19. жкарусель лайт делает вертикальные – пример был там. обычная жкарусель вроде тоже.
    чтобы сделать вертикальную из горизонтальной, знать js не нужно – нужно всего лишь со стилями css поковыряться.

  20. Mike Silence
    14/07/2010 at 12:51 Постоянная ссылка Цитировать

    Возник еще такой вопрос в Jкарусельки можно сделать так что бы центральная картинка была обычная а две картинки по сторонам были слегка затемнены и расположить кнопки прокрутки на них?
    (аналог на флеше http://hypernorm.com/flash/367-dlja-dizajjnerov-interera.html)

  21. такого плагина не видел, видел только подобный – Moving Boxes (третий в списке http://shublog.ru/ajax/jquery/7-ajax-galerejj-dlya-jquery/ ). Можно его попробовать доработать. Ну или свой написать. Но я не видел предлагаемый пример флэша, т.к. не скачивал. Может быть точно такой же как там и нельзя, но подобный можно точно.

  22. Mike Silence
    14/07/2010 at 14:12 Постоянная ссылка Цитировать

    к сожалению по данной ссылке пишет 404 ошибку

  23. Mike Silence
    14/07/2010 at 14:18 Постоянная ссылка Цитировать

    Нашел, но мне кажется, что она мало чем отличается от Жкарусели

  24. не сказал бы, всё таки там другие фотографии по бокам, которые надо затемнить, т.е. чтобы было как в предложенном на флэше примере.

  25. Mike Silence
    14/07/2010 at 16:27 Постоянная ссылка Цитировать

    Спасибо, поковыряемся сегодня )

  26. Возник такой вопрос по Photo Slider. Можно ли его привязать к папке с фотографиями ? В папке будут постоянно появляться новые фото с разными именами. Идея в том, что бы он подцеплял все что находится и появляется в этой папке невзирая на имена файлов. И возможно ли сделать так, чтоб он сам автоматом представлял миниатюрные изображения из полноразмерных.
    Буду очень рад любому совету или ссылке на то как такое можно реализовать.

  27. Это уже вопрос создания галереи, тут надо PHP, можно в связке с MySQL. На тему изменения размера можно почитать тут.
    Что касается скрипта в целом, то как вариант можно делать так – загружаем изображение, копируем куда надо, делаем миниатюру к нему, записываем имя файла в БД. А на сайте просто извлекать данные из БД.

  28. Очень нужна каруселька для картинок, чтобы на шапку сайта поставить, чтобы она постоянно крутилась, показывая разные картинки. Без кликов и управления. Чтоб сама двигалась при заходе на сайт и покрасивее. Есть такая? Дайте пожалуйста ссылку, если есть.

  29. 8,9,11,12,13,ещё 17 можешь глянуть. а в этой статье седьмую посмотри.
    во всех них есть автопрокрутка

  30. Добрый день Александр! К сожалению PHP я не знаю и вряд ли сам смогу написать то что нужно. Возможно вы сможете мне помочь в данной ситуации . Если да, то не могли бы вы назвать приблизительную стоимость создания такой галереи ?

  31. В принципе могу помочь. Нужно детально обсудить, что именно нужно, какой функционал, и исходя из этого будет цена. Предлагаю перебраться на почту. Моя везде указана, пишите, обсудим.

  32. Вот еще интересный вопрос – есть ли карусельки наподобие jCarousell но в которых можно было бы сделать непрерывное движение и менять его направление встроенными функциями? Просто вот это дергание jCarousell при прокрутке раздражает, а так просто равномерно сменяются картинки.

  33. ммм, хотелось бы уточнить – нужно, чтобы по нажатии кнопки плавно передвигалась карусель? или что-то типа при наведении плавно ползли картинки?

  34. Мне проще показать пример на флешэ, который хотелось бы повторить.
    http://osteon.ru – вот там слева есть галерея “Наши врачи”. Возможно ли реализовать что-то похожее?

  35. Да, такое точно возможно, но адекватных галерей мало. Буду дома, посмотрю ссылки, где-то было, тогда сегодня или завтра выложу.

  36. Буду премного благодарен. Я видел реализации подобного на mootools, но мешать на одном проекте два фреймворка бы не хотелось.

  37. Ссылка 1
    Ссылка 2

    Вторая думаю то, что надо

  38. А почему нет ColorBox???Она лучше чем ThickBox или FancyBox ???

  39. Всё просто – статья была написана полтора года назад. Я уже давно несу в себе цель написать более полную статью по галереям jQuery, у меня уже есть их подборка и КолорБокс среди них уже есть. Обещаю, я рано или поздно точно доберусь написать пост типа “50 галерей на jQuery и ни каплей меньше” =)

  40. У меня еще один вопрос, ColorBox лучше или хуже чем ThickBox или FancyBox

  41. Лучше или хуже – это дело вкуса, конечно. Но лично я отдал бы предпочтение именно КолорБоксу, по нескольким причинам. Большой функционал, возможности и много примеров на сайте “производителя” (хотя главное тут именно примеры – прежде всего по ним оцениваешь что тебе надо). Плюс разработчики позаботились над оформлением – выглядит оно получше, чем у двух других плагинов. СикБокс, к примеру, выглядит немного деревянно. Конечно, я особо не вглядывался, да и работал по существу только с фансибоксом, поэтому не могу сказать на тему удобства работы какой лучше. Но в ближайшем проекте с галереями я буду пробовать именно колор.

  42. Спасибо за совет.

  43. Всегда пожалуйста

  44. Я вот думаю: причём тут AJAX вообще?

  45. Алексей
    30/06/2011 at 1:19 Постоянная ссылка Цитировать

    Очень хочу найти слайдер как на ВиО Какой подойдет из перечисленных? Помогите найти плиз.

  46. А что такое вио? вирус иммунодифицита у обезьян? =)

  47. Алексей
    30/06/2011 at 12:29 Постоянная ссылка Цитировать

    Да ну – нет. :) Какие вирусы? Я не коварный умник – я лишь добрый глупец. ВиО – это вопросы и ответы от Гугл. Там на заглавной слайдер у них красивый. Такой же хочу для своей aqula.ru

  48. Аааа =). Ну, надо смотреть плагинов побольше, но думаю., что можно переделать jQuery SerialScroll

  49. Алексей
    04/07/2011 at 11:08 Постоянная ссылка Цитировать

    спасибо, буду разбираться…

  50. всегда пожалуйста! =)

  51. скажите как можно разместить lightbox и jcarusel на одной странице? когда они на одной странице они конфликтуют

  52. Александр Шуйский
    10/06/2012 at 8:34 Постоянная ссылка Цитировать

    Ответ на вопрос как – спокойно. Они не конфликтуют. Покажите ваш пример, посмотрим, что вы сделали не так.

  53. www.KrasnoYarsk.front.ru
    11/07/2012 at 12:01 Постоянная ссылка Цитировать

    Многие ссылки уже поотвалились…

  54. Александр Шуйский
    11/07/2012 at 12:15 Постоянная ссылка Цитировать

    Это да, но и статья старая… У меня зреет расширенная большая статья по галереям на jquery, но пока руки не доходят

  55. Творимир
    10/03/2016 at 11:19 Постоянная ссылка Цитировать

    Огромное вам пасибо! а еще посты на эту тему будут в будущем?

  56. Александр Шуйский
    10/03/2016 at 11:21 Постоянная ссылка Цитировать

    Спасибо!
    Планировались когда-то, но шанс того, что они будут меньше процента. Работы по блогу заморожены и пока непонятно буду ли развивать блог дальше. Скорее нет, чем да, а если и буду, то он скорее будет уже не программерский.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии