Топ плагинов jQuery. Плагин TwentyTwenty

Топ плагинов jQuery. Плагин TwentyTwenty

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

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

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

Собственно, это и все. Пока что мы увидим обе картинки в блоке:

Топ плагинов jQuery. Плагин TwentyTwenty

Ничего необычного. Но стоит нам вызвать одноименный метод плагина — twentytwenty():

Как в результате мы увидим чудесное преображение:

Топ плагинов jQuery. Плагин TwentyTwenty

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

Топ плагинов jQuery. Плагин TwentyTwenty

Также мы можем управлять стартовой позицией ползунка с помощью опции default_offset_pct:

Топ плагинов jQuery. Плагин TwentyTwenty

Также можно изменить положение ползунка и способ открытия картинок, с горизонтального на вертикальный — для этого используется опция orientation:

Топ плагинов jQuery. Плагин TwentyTwenty

Согласитесь, плагин TwentyTwenty реализует действительно оригинальный эффект. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!

Метки:

Похожие статьи:

Комментарии Вконтакте: