Скрипт сравнения изображений "до и после" для uCoz

4122 просмотров Alan_Writer 08.08.2015

Скачать 📥 Демо ▶️

Скрипт изображений "до и после", позволяет удобно и наглядно сравнить два изображения. В общем описывать тут что-то не вижу смысла, скрипт по сути имеет лишь одну функцию, и как он работает я думаю вы понимаете, а если нет - то смотрите демо. Некоторые незначительные параметры, размеры и оформление конечно тоже можно настроить, но основная функция у него одна - сравнение двух изображений. Полезен будет скрипт мне кажется на каких-нибудь сайтах фото-тематики, или как я например - часто встречал его на игровых сайтах, где сравнивалась допустим игра с разными настройками, и благодаря такой функции было проще увидеть разницу.

Установка

1. Скачайте архив. Создайте в корне файлового менеджера папку afterbefore, и в нее залейте все содержимое архива.

2. Теперь нужно прописать пути к файлу скрипта и стилей, а также скрипт вызова с настройками. Ставим это все перед </body>:
Код
<link rel="stylesheet" href="/afterbefore/afterbefore.css"/>
<script src="/afterbefore/afterbefore.js"></script>
<script>
jQuery(function(){
bafinstance = new ddbeforeandafter({
wrapperid: 'baf', // ID блока до и после
initialreveal: ['50%',1], // начальное положение ползунка и скорость
revealduration: 0.4, // скорость ползунка при нажатии на ссылки
hidedragbardelay: 1, // скорость скрытия ползунка (в секундах)
})
})
</script>
** Настройки (то что можно менять или удалять) я специально подписал.

3. И последнее - сам блок "до и после", ставим в нужное место:
Код
<div id="baf" class="afterbefore">
<div class="before">
<img src="ссылка на изображение до"/>
<span class="caption">ДО</span>
</div>
<div class="after">
<img src="ссылка на изображение после"/>
<span class="caption">ПОСЛЕ</span>
</div>
</div>
Размеры блока и другие параметры оформления - настраиваются в css-файле стилей.

Управлять ползунком можно не только непосредственно перетаскивая его мышью, но и создав ссылки при нажатии на которые ползунок будет передвигаться в нужное положение. Вот пример такой ссылки:
Код
<a href="#" onclick="bafinstance.unveil('40%'); return false">Показать "после" на 40%</a>
Ну тут я думаю все и так понятно, хотя вряд-ли это кому-то будет нужно, как по мне мышкой перетаскивать ползунок - гораздо удобней.

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

Теги: скрипт, до и после, для uCoz
0 Комментариев