Вывод вариантов «до» и «после» для изображений с помощью плагина TwentyTwenty

Дата публикации:Апрель 23, 2014

Сталкивались ли вы когда-либо с необходимостью наложения двух изображений «до» и «после» друг на друга для вывода на экран? Вы не можете делать это в WordPress «из коробки», однако для этого существует специальный плагин TwentyTwenty, созданный Кори Мартином. Плагин использует преимущества свойства clip в CSS, с помощью которого происходит наложение двух идентичных по размеру изображений друг на друга. Свойство clip позволяет выводить изображение в собственном контейнере. Слайдер является адаптивным и использует произвольные события перемещения, содержащиеся в библиотеке jQuery Event Move, чтобы поддерживать переключение слайдера 1:1 на мобильных устройствах.

Плагин очень простой в использовании. Загрузите два изображения идентичных размеров в медиа-библиотеку. При вставке изображений в пост убедитесь в том, что параметры размера изображений являются одинаковыми. Добавьте шорткод [TwentyTwenty] над исходным изображением и шорткод [/TwentyTwenty] после конечного изображения. Вот пример шорткодов, добавленных в запись:

twtwshort

Шорткоды генерируют слайдер, который можно перетаскивать взад и вперед. Вы будете видеть, какое изображение является исходным, а какое – измененным, если наведете курсор мыши на слайдер. Чтобы увидеть какое-либо из изображений, щелкните и перетащите кружок влево или вправо.

TwentyTwentyBefore

TwentyTwentyAfter

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

Вот несколько идей, для чего может пригодиться TwentyTwenty:

  • Сравнение подделок с реальными товарами
  • Варианты редизайна веб-сайта
  • Реконструкция дома (до и после)

В процессе моих тестов с WordPress 3.9 я не столкнулся с какими-либо проблемами при использовании плагина. Как говорит Мартин, TwentyTwenty совместим с последними версиями Chrome, Safari, FireFox, iOS, IE 9 и т.д. Если вы хотите увидеть плагин в действии, то вы можете посмотреть следующий скринкаст от Мартина или посетить страницу плагина на Zurb.com.

Источник: wptavern.com

Поделиться

Оставить комментарий

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

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