Матвей Земсков

Заметки веб-мастера

Воскресенье, 14 июля 2013 15:02

Полезные jQuery плагины – небольшой обзор для веб-мастера.

Оцените материал
(6 голосов)

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

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

jQuery галерея

Галерея Highslide JS

Плагин Highslide JS

Highslide JS – jQuery-галерея для показа фотографий и другого медиа-контента, например, flash-роликов, динамического контента, загружаемого с помощью AJAX, видео с youtube и многого другого. Это jQuery-плагин обладает массой возможностей и настроек.

Вот некоторые из них:

  • высокая скорость работы и элегантный вид;
  • не требует подключения сторонних плагинов, таких как Flash или Java;
  • увеличение изображения производится одним кликом, при этом посетитель может прокрутить страницу, не закрывая окно с изображением;
  • если отключить все дополнительные возможности галереи, объем ее файлов составит всего 10 Кб;
  • при отключенном javaScript или при использовании устаревшего браузера, пользователь все равно увидит содержимое, только откроется оно в новом окне или новой вкладке;
  • доступен исходный код;

Демо   Скачать

Галерея jQuery PrettyPhoto

Галерея jQuery PrettyPhoto

jQuery-плагин PrettyPhoto – полноценная lightbox галерея, которая кроме изображений поддерживает также видео файлы, Flash, YouTube и iFrame. Благодаря полезным методам своего API, галерея очень гибко настраивается под ваши требования. Кроме того, установка этой jQuery-галерии не составляет особого труда. Поддерживает все основные браузеры. Работает даже в устаревшем IE6.

Это абсолютно свободное ПО, распространяемое по лицензии GPLv2.

Демо   Скачать

jQuery - фотогалерея Lightbox2

фотогалерея Lightbox2

Lightbox2 – небольшой jQuery-плагин для показа изображений во всплывающем блоке поверх содержимого страницы с затенением. Он прост в установке и работает во всех современных браузерах. При его использовании время загрузки страницы увеличивается незначительно. Для работы Lightbox2 не требуются дополнительные плагины. В случае если браузер не поддерживает javaScript, используется подход gracefull degradation.

Демо  Скачать

jQuery слайдер

jQuery слайдер noUiSlider

jQuery слайдер noUiSlider

noUiSlider – небольшой, гибкий в настройке слайдер «без наворотов». Поддерживает следующие браузеры: Google Chrome, Firefox, Opera, Safari и Internet Explorer, начиная с 7 версии. Он также поддерживает возможности тачскрин на таких устройствах, как iPhone, iPad, мобильных устройств на платформе Windows8 и Android. От себя отмечу, что это отличная альтернатива jQuery UI в случае, если кроме слайдера вам ничего больше не нужно использовать в вашем проекте.

Демо Скачать

jQuery слайдер Dragdealer JS

jQuery слайдер Dragdealer JS

Dragdealer JS - это одно из бесконечного множества решений, помогающих улучшить интерфейс ваших веб-приложений. Разработан для знающих frontend-разработчиков. Минимальный размер этого jQuery-плагина составляет всего 12 Кб. Взаимодействие с этим слайдером осуществляется с помощью мыши, также поддерживаются устройства с тачскрин.

Демо   Скачать

jQuery слайдер Nivo Slider

jQuery слайдер Nivo Slider

Nivo Slider - известен как самый красивый и простой в использовании слайдер. Этот jQuery-плагин абсолютно бесплатен с полностью открытым исходным кодом. С ним ваш сайт будет выглядеть потрясающе. Преимущества Nivo Slider состоят в следующем:

  • при смене изображений доступно 16 различных визуальных эффектов;
  • простая и гибкая настройка;
  • небольшой размер, использование семантической разметки;
  • существует плагин для CMS Wordpress

Демо Скачать

jQuery карусель

jQuery карусель jCarousel

jQuery карусель jCarousel

jCarousel - Это jQuery плагин позволяет управлять набором элементов (например, изображений) расположенных на странице в вертикальном или горизонтальном виде. Это классическая jQuery карусель в задачу которой входит дать возможность посетителю сайта прокручивать элементы набора в прямом или обратном порядке. При этом могут происходить различные анимационные эффекты. Элементы могут выводиться статическим html-кодом, либо загружаться при помощи AJAX.

Демо   Скачать

jQuery карусель clickCarousel

jQuery карусель clickCarousel

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

Демо  Скачать

jQuery карусель Moodular

jQuery карусель Moodular

Этот jQuery плагин позволяет без проблем создать галерею с эффектом карусели или слайдера. Moodular очень гибко настраивается, вплоть до создания своих собственных элементов управления и эффектов при смене изображений. Как и многие другие плагины (в том числе и описанные в этой статье), Moodular поддерживает устройства с тачскрин. Область применения этой jQuery карусели широка: от онлайн-портфолио и поочередного показа нескольких рекламных баннеров до галереи изображений и отображения простого текстового содержимого.

Демо   Скачать

В заключении статьи хотелось бы рассказать еще об одном jQuery плагине, который называется cuSel. Он, как и один из описанных в этой статье решений, предназначен для улучшения интерфейса элементов форм на страницах вашего сайта. Как известно, для этих целей можно использовать библиотеку jQuery UI, но она все-таки большая (хотя ее можно и кастомизировать под свои нужды), а иногда требуется изменить совсем немного в частности элемент select. Как раз для этого и подойдет cuSel. На странице плагина вы сможете ознакомиться со всеми необходимыми настройками и скачать его. Надеюсь, что этот небольшой обзор средств, которыми часто приходится пользоваться в процессе создания сайтов, будет вам полезен.

Прочитано 13231 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх