Авторизация



Напомнить пароль
Регистрация


РазработкаjQuery Mootools CSS галереи для эффектного оформления изображений. Часть 1

jQuery галерея в виде настенных картин

Около 80 интересных функциональных jQuery Mootools CSS решений для представления галерей изображений в ваших веб-проектах.

В заметке представлены различные варианты исполнения: от маленьких мини-галерей до больших функциональных галерей с разбиением изображений по категориям, с автоматическим генерированием миниатюр и без него. Огромное количество всевозможных эффектов: перелистывание страницы, зуммеры, круговые галереи, галереи с 3D эффектами, галереи в виде стопок фотографий, галереи с различными видами прокрутки и навигации между изображениями, масштабируемые галереи, изменяющие свой размер вместе с размером окна браузера и очень много других потрясающих решений.

Область использования подобных jQuery и Mootools плагинов очень широка: от представления онлайн-портфолио до отображения нескольких фотографий товара в интернет-магазине. Некоторые из представленных решений специально заточены для просмотра с мобильных устройств.

Одним словом, из этого огромного списка галерей вы обязательно найдете те, которые будут вам по душе.

1. jQuery галерея с эффектом перелистывания страницы

Внешний вид миниатюр на странице

Подобное решение можно использовать для вывода последних статей в блоге либо для презентации товаров. 

2. Галерея с круглыми миниатюрами

Галерея с круглыми миниатюрами

Уникальный способ отобразить ваши фотографии в виде jQuery необычной галереи.

3. jQuery галерея изображений для товара, плагин «slideJS»

jQuery слайдер изображений

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

4. Мини-галерея на jQuery

Мини-галерея на jQuery

Изображение увеличивается при наведении на него курсора мыши.

5. Элегантная Lightbox галерея «ppGallery»

jQuery галерея

6. Мини-галерея jQuery «Touch-Gallery»

jQuery галерея

7. Новая jQuery галерея с миниатюрами

jQuery галерея

Профессиональная jQuery галерея 2011 года.

8. jQuery плагин «Nivo Zoom»

Зумер на jQuery

Еще один качественный jQuery плагин от разработчиков Nivo слайдера. Увеличение изображение по нажатию на миниатюру.

9. jQuery галерея «3d Wall Gallery»

jQuery галерея с различными способами прокрутки изображений

Новая jQuery галерея 2011 года. Лента изображений растянута на всю ширину экрана. Навигация между фотографиями осуществляется тремя способами: с помощью колеса мыши, с помощью  прокрутки сверху галереи и с помощью блока с миниатюрами снизу. Галерея выглядит очень эффектно.

10. jQuery галерея

jQuery галерея

Изображения в галерее случайным образом увеличиваются и снова уменьшаются создавая эффект пузырьков.

11. Необычное отображение изображений в jQuery галерее

jQuery стопка фотографий

С помощью ползунка сверху можно изменить расстояние между изображениями в стопке. При нажатии на изображение оно поворачивается.

12. Плагин jQuery галереи «MB.Gallery»

jQuery галерея

13. jQuery галерея, растягивающаяся на весь экран

jQuery галерея

Плагин 2011 года. Новая галерея  с описанием изображений, растягивающаяся на всю область окна браузера не зависимо от его размеров. Интересно реализованы миниатюры изображений. Переход между фотографиями осуществляется с помощью стрелок около миниатюры и с помощью колеса мыши.

14. Легкая jQuery галерея

jQuery галерея в несколько строк кода

 

15. Галерея с автоматическим генерированием миниатюр

Галерея с автоматическим генерированием миниатюр

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

16. Стильная галерея с использованием библиотек jQuery и Raphael

Стильная галерея на jQuery

Интересный эффект при наведении курсора мыши на миниатюру.

17. Новая версия jQuery плагина «Supersized» версия 3.1

Полноэкранная галерея jQuery

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

18. jQuery плагин «Galleria 1.2.2»

Галерея

Новая jQuery галерея для ваших проектов.

19. jQuery галерея

Галерея изображений

Галерея выплывает на странице по нажатию на кнопку. Миниатюры отображаются вокруг увеличенного изображения. Можно управлять автоматической сменой изображений. Используемые технологии: jQuery, CSS, PHP.

20. Плагин «Timer Gallery»

Галерея

jQuery галерея. Реализована автоматическая смена слайдов и прокрутка миниатюр, если их слишком много.

21. jQuery галерея

jQuery галерея

Плагин галереи изображений на jQuery.

22. JavaScript галерея для просмотра на мобильных устройствах «PhotoSwipe»

JavaScript галерея для просмотра на мобильных устройствах

Галерея изображений, оптимизированная для просмотра на мобильных устройствах (телефонах или планшетах).

23. JavaScript галерея с 3D эффектом

3D галерея

24. Галерея «jQuery morphing gallery»

jQuery слайдер

Новый jQuery слайдер. Несколько классных анимированных эффектов при смене слайдов.

25. jQuery плагин «Galleria 1.2.3»

Функциональный плагин для отображения изображений

Функциональный плагин для отображения изображений. 

26. jQuery галерея изображений «Image Wall»

jQuery галерея в виде настенных картин

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

27. CSS3 галерея

CSS галерея

Интересный эффект при наведении.

28. Галерея с миниатюрами «TN3 Gallery»

Галерея с миниатюрами

jQyery галерея с миниатюрами. Реализована возможность просмотра в компактном окне и в окне на весь экран, а также возможность отключать/включать автоматическую смену слайдов.

29. Сетка изображений «Grid-Gallery»

jQuery сетка изображений

Сетка изображений растягивается в зависимости от ширины окна браузера. Интересный эффект при наведении: подсвечивается активный ряд и колонка.

30. jQuery галерея «Swap Gallery»

jQuery галерея

Легкая галерейка jQuery в несколько строк кода.

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

31. Галерея изображений jQuery

Слайдер на jQuery

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

32. Круговая галерея jQuery

Круговая галерея jQuery

Изображение и его миниатюры выполнены в виде кругов.

33. jQuery плагин портфолио фотографа «Portfolio Image Navigation»

Навигация для просмотра портфолио фотографа

Оригинальное JavaScript решение для оформления портфолио фотографа. Навигация между изображениями осуществляется с помощью стрелок Вверх/Влево/Вправо и при помощи мини-квадратов  (имитация перемещения в 2D пространстве). Можно сгруппировать фотографии из разных фото сессий в разные вертикальные ряды и перемещаться по ним с помощью элементов навигации. Смотрите демонстрацию.

34. Плагин «jmFullZoom»

jmFullZoom

Плагин для просмотра изображений, растягивающихся на весь размер окна браузера. Можно использовать  для показа работ из портфолио.

35. Фото-карта

Галерея с картой Гугл

Галерея интегрированная с Google картой. Можно развернуть на весь экран, нажав на иконку в правом нижнем углу. Отлично подойдет для туристических сайтов.

36. Галерея изображений с миниатюрами

Галерея с миниатюрами

jQuery галерея с миниатюрами.

37. jQuery галерея  «Galleriffic»

Фото-альбом

Слайд-шоу с миниатюрами.

38. jQuery CSS3 плагин «Wave Display Effect»

jQuery CSS3 волна из изображений

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

39. Parallax Gallery

Parallax Gallery

40. NoobSlide бесплатная Mootools галерея

NoobSlide бесплатная Mootools галерея

Много вариантов отображения и настроек.

41. Динамические галерея изображений и слайд-шоу

Динамические галерея изображений и слайд-шоу

42. Plogger

Plogger галерея

Plogger является отличной фотогалереей с открытым исходным кодом. Она не раздута лишним функционалом или сложной настройкой. Plogger является простым, но мощным инструментом для того чтобы поделиться своими фотографиями с посетителями сайта. Требования: PHP4, MySQL3. Для установки галереи распакуйте файлы на сервер, создайте базу данных и пользователя к ней, в веб-браузере запустите скрипт установки по адресу http://www.yoursite.com/plogger-folder/plog-admin/_install.php после чего можете зайти администраторскую панель галереи и начать её настройку и загрузку изображений.

43. Простенькая симпатичная галерея, сделанная на CSS, без использования скриптов

 CSS Галерея

Красиво выглядит и отлично работает во всех современных браузерах

44. Фото-галерея

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

45. Галерея в минималистическом стиле

Галерея в минималистическом стиле

Можно управлять автоматическим показом слайдов (старт/стоп), переключение слайдов с помощью стрелок клавиатуры, автоматическое постраничное разбиение названий слайдов, если их много, поддерживается несколько галерей на одной странице, подписи к слайдам, поддержка API и возможность создавать свои эффекты перехода слайдов

46. Галерея в виде стопки фотографий

jQuery галерея Палароид

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

47. jqFancyTransitions 

Плагин для jQuery галереи

jQuery галерея для вашего сайта

48. jPhotoGrid

Сетка jQuery

Сетка изображений. Галерея с jquery эффектом.

49. Spacegallery

jQuery галерея

Интересная jQuery галерея. При нажатии кнопки мыши изображения растворяются.

50. Стиль Palaroid для галереи LightBox

Palaroid галереи LightBox

51. jQuery галерея. Стена изображений

Плагин jQuery стена изображений

52. jQuery галерея в виде фотографий на столе

Часы jQuery

Фотографии можно перетаскивать, закрывать, просматривать по одной фотографии.

53. Свежая jQuery галерея

Свежая jQuery галерея

Отличная галерея. Интересное представление фотографий, разбитых по категориям. Рекомендую посмотреть демонстрацию скрипта.

54. jQuery микро галерея 

jQuery галерея

 

55. Свежая jQuery галерея

Галерея

Классная галерея. Реализовано разбиение по альбомам. К тому же, эта галерея заточена для просмотра с мобильных устройств.

56. Mootools карусель «iCarousel»

jQuery карусель

Слайдер отлично подойдет для использования в интернет-магазинах и не только.

57. jQuery галерея 

jQuery галерея

Красивая jQuery галерея.

58.jQuery галерея

Слайдер jQuery

Несколько вариантов смены изображений.

59. Галерея «Пикачу v4.0.2»

jQuery галерея

Отличная функциональная jQuery галерея с возможностью автоматической смены слайдов и отображением описания изображений. На странице загрузки скачивание начнется автоматически через несколько секунд.

60. CSS и jQuery слайдер изображений

jQuery слайдер

Внешний вид легко настроить с помощью CSS.

61. jQuery галерея

jQuery меню

Интересная jQuery галерея.

62. Галерея изображений «SliderGallery»

jQyery галерея изображений

Качественная галерея изображений. Карусель миниатюр прокручивается с помощью ползунка. Реализована возможность разбивания изображений на альбомы.

63. jQuery галерея изображений

Галерея изображений

Галерея изображений на весь экран с каруселью из миниатюр. При перемещении курсора мыши происходит навигация по изображению большого размера.

64. Галерея изображений в стиле полароид

Галерея изображений в стиле Polaroid

Предусмотрено наличие нескольких альбомов. При выборе интересующего альбома изображения, входящие в него, разворачиваются в ряд внизу экрана. При нажатии на изображение оно увеличивается.

65. Классная jQuery CSS3 галерея

Галерея

jQuery галерея. Прикольный эффект при наведении курсора мыши на миниатюры.

66. Круговая jQuery галерея «Roundrr»

Галерея

Необычное решение для организации галереи изображений. Навигация между изображениями может осуществляться как при помощи кнопок и самих миниатюр, так и при помощи стрелок на клавиатуре. Нет возможности поставить  прямую ссылку для скачивания архива. Чтобы сохранить галерею нажмите на ссылку «Download» на странице загрузки.

67. Плагин галереи на jQuery VisualLightBox

jQuery галерея

68. Плагин jQuery галерея

jQuery галерея

Свежий jQuery плагин, реализующий галерею изображений в виде стопки фотографий.

69. jQuery галерея

Галерея в виде стопки фотографий

70. jQuery галерея

Галерея jQuery

71. jQuery галерея «BlogSlideShow»

jQuery галерея

Галерея поддерживает 6 различных эффектов смены изображений. Все варианты эффектов вы можете посмотреть, выбрав их из выпадающего списка на демонстрационной странице перед просмотром. Для просмотра галереи нажмите на любую ссылку в списке на демо-странице.

72. Интересная галерея MooTools «ElementStack»

Mootools галерея

Прикольный анимированный эффект показа изображений.

73. Mootools галерея изображений «scrollGallery»

Mootools галерея изображений

Миниатюры прокручиваются при наведении курсора мыши.

74. Удивительная автоматизированная CSS3 lightbox галерея

Удивительная CSS3 lightbox галерея

Скрипт сканирует папку с изображениями на вашем сервере и имеющиеся в ней фотографии отображает на странице в виде стопки фотографий. Фотографии можно перетаскивать по экрану с помощью мышки. При нажатии на изображение оно увеличивается с использованием плагина fancybox. Используемые технологии: CSS, PHP, jQuery.

75. Автоматизированная jQuery галерея

jQuery галерея

PHP скрипт сканирует папку, в которую вы записываете изображения, и выводит их миниатюры на странице. При нажатии на изображение увеличение происходит с известным анимированным эффектом LightBox.  Очень удобно то, что вывод изображений осуществляется автоматически, вам достаточно лишь поместить необходимое фото в папку «gallery», в которой должны хранится изображения для галереи.

76. jQuery галерея с потрясающим анимированным эффектом

Смена изображений в галерее

Это на самом деле очень классная галерея с очень редким эффектом. Я уверен, что она не оставит вас равнодушными.  Внимание: в различных браузерах jQuery эффект может слегка отличаться. Самый интересный и плавный эффект вы сможете наблюдать в браузерах Google Chrome и Apple Safari.

77. jQuery галерея изображений

jQuery галерея изображений

Имеется возможность отображать изображения в виде слайд-шоу с автоматической сменой слайдов.

78. jQuery галерея «Zoomer Gallery»

jQuery галерея

jQuery галерея с отличным эффектом увеличения изображения при наведении курсора.

79. jQuery плагин «MobilyNotes» 

jQuery плагин для необычного отображения HTML содержимого

jQuery плагин для необычного отображения изображений.

Подготовлено по материалам: efimov.ws

  • 0
  • Автор: efimov
  • Дата: 23 ноября 2011, 10:14
  • В избранное:


Комментарии (0)

rss свернуть / развернуть
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.