Увы, шаблон недоступен для скачивания или покупки, в связи с обращением правообладателя! По всем вопросам обращайтесь к Администратору.
Скрипт изображений "до и после", позволяет удобно и наглядно сравнить два изображения. В общем описывать тут что-то не вижу смысла, скрипт по сути имеет лишь одну функцию, и как он работает я думаю вы понимаете, а если нет - то смотрите демо. Некоторые незначительные параметры, размеры и оформление конечно тоже можно настроить, но основная функция у него одна - сравнение двух изображений. Полезен будет скрипт мне кажется на каких-нибудь сайтах фото-тематики, или как я например - часто встречал его на игровых сайтах, где сравнивалась допустим игра с разными настройками, и благодаря такой функции было проще увидеть разницу.
Установка
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>
Ну тут я думаю все и так понятно, хотя вряд-ли это кому-то будет нужно, как по мне мышкой перетаскивать ползунок - гораздо удобней.
Собственно это все, скрипт очень простой в использовании, да и сам весит не много - при этом может оказаться незаменим в некоторых случаях.