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

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

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

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

<link rel="stylesheet" href="css/twentytwenty.css">
<script src="https://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>

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

<div id="container">
 <img src="http://lorempixel.com/600/300/sports" alt="">
 <img src="http://lorempixel.com/600/300/city" alt="">
</div>

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

$(function() {
 $('#container').twentytwenty();
});

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

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

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

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

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

$('#container').twentytwenty({
 default_offset_pct: 0.1 // сдвинем его влево и покажем 10% картинки слева
});

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

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

$('#container').twentytwenty({
 default_offset_pct: 0.3,
 orientation: 'vertical'
});

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree