От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами jQuery, позволяющими решить большой круг различных задач. В этой статье мы познакомимся с оригинальным плагином TwentyTwenty. Этот плагин достаточно сложно отнести к какой-либо категории, это просто достаточно интересная реализация смены пары картинок. В общем, вместо сотни слов вам лучше один раз увидеть работу плагина в действии ниже.
Итак, как обычно, представим официальный сайт плагина TwentyTwenty, на котором можно посмотреть его работу в действии. Также плагин можно найти в репозитории на GitHub. Сразу же скачаем его оттуда. Из полученного архива подключим необходимые стили и скрипты, без которых плагин работать не будет. Итак, для подключения плагина TwentyTwenty нам потребуются следующие файлы:
1 2 3 4 |
<link rel="stylesheet" href="css/twentytwenty.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.event.move.js"></script> <script src="js/jquery.twentytwenty.js"></script> |
Далее нам необходима разметка. Разметка достаточно проста: нам потребуется блок, внутрь которого мы поместим пару изображений:
1 2 3 4 |
<div id="container"> <img src="//lorempixel.com/600/300/sports" alt=""> <img src="//lorempixel.com/600/300/city" alt=""> </div> |
Собственно, это и все. Пока что мы увидим обе картинки в блоке:
Ничего необычного. Но стоит нам вызвать одноименный метод плагина — twentytwenty():
1 2 3 |
$(function() { $('#container').twentytwenty(); }); |
Как в результате мы увидим чудесное преображение:
Изображения совмещены, а по центру находится ползунок, перетаскивая который мы будем открывать первое или второе изображение.
Также мы можем управлять стартовой позицией ползунка с помощью опции default_offset_pct:
1 2 3 |
$('#container').twentytwenty({ default_offset_pct: 0.1 // сдвинем его влево и покажем 10% картинки слева }); |
Также можно изменить положение ползунка и способ открытия картинок, с горизонтального на вертикальный — для этого используется опция orientation:
1 2 3 4 |
$('#container').twentytwenty({ default_offset_pct: 0.3, orientation: 'vertical' }); |
Согласитесь, плагин TwentyTwenty реализует действительно оригинальный эффект. Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!