Skip to content

Эффект "До - после" с jQuery

Привет, друзья! Сегодня хочу вам показать, как с помощью jQuery сделать эффект «До-после». Его смысл заключается в том, чтобы совместить два изображения: которое было «до» и которое стало «после». Результат, полученный в браузере, будет интерактивный, то есть можно будет увидеть и то, что было «до», и то, что «после», и совмещенный вариант.

Эффект, который мы сделаем, будет хорошо смотреться на сайтах, связанных с графикой (собственно на одном из них я этот скрипт и нашел), где надо показать, какое было исходное изображение, а какое стало, после его обработки. Полученный результат представляет из себя, наложенные друг на друга, 2 изображения и ползунок, который можно двигать.

Что нам потребуется

Мы будем использовать плагин jQuery — BeforeAfter. Для его работы требуется:

  1. Собственно, библиотека jQuery
  2. Части библиотеки jQuery UI: Ядро, ядро виджетов, виджет мыши и интерактивность перетаскивания

Все это можно взять из исходных файлов

Шаг 1 — HTML

<div>
<div><img alt="before" src="<!-- Путь до картинки 'до' -->" /></div>
<div><img alt="after" src="<!-- Путь до картинки 'после' -->" /></div>
</div>

Как видите разметка состоит из блока .before-after, в котором располагаются еще два блока с картинками «До» и «После». Для корректной работы плагина в старых версиях webkit (Chrome, Safari) картинкам потребуется добавить атрибуты высоты и ширины.

Шаг 2 — jQuery

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

$('.before-after').beforeAfter();

Плагин поддерживает настройки, которые можно передать объектом.

  • animateIntro — после загрузки проведет ползунок справа до центра (по-умолчанию false)
  • introDelay — если значение предыдущего свойства поставлено на true, то это задаст значение задержки до начала анимации ползунка в миллисекундах (по-умолчанию 1000, т.е. секунда)
  • introDuration — если значение первого свойства поставлено на true, то это задаст значение в миллисекундах за которое ползунок пройдет от правого края до центра (по-умолчанию 1000, т.е. секунда)
  • showFullLinks — включает/отключает показ ссылок под эффектом, которые по клику делают видимыми либо изображение «До», либо «После» (по-умолчанию true)
  • beforeLinkTextafterLinkText — используются для изменения текста ссылок, которые показываются из опции showFullLinks (по-умолчанию «Show only before» и «Show only after» соответственно)
  • introPosition — положение ползунка (по-умолчанию .5). К примеру, .25 переместит ползунок на четверть слева
  • cursor — значение CSS-свойства cursor при наведении на ползунок (по-умолчанию «pointer»)
  • clickSpeed — время в миллисекундах, за которое переместится ползунок до места клика по фотографии (по-умолчанию 600)
  • dividerColor — HEX-значение цвета для фонового цвета полоски ползунка (по-умолчанию #888)
  • enableKeyboard — добавляет возможность перемещать ползунок нажатием стрелок на клавиатуре (по-умолчанию false)
  • keypressAmount — если значение enableKeyboard — true, задает на сколько пикселей будет перемещаться ползунок (по-умолчанию 20)

Пример использования настроек плагина:

$('.before-after').beforeAfter({
showFullLinks: true,
beforeLinkText: '"До"',
afterLinkText: '"После"',
cursor: 'move',
clickSpeed: 200
});