Эффект ДО/ПОСЛЕ для изображений на jQuery

Всем привет! Сегодня я предлагаю Вам оценить и забрать себе на блог классный скрипт, который интерактивно сравнивает два изображения, путем наложения одного на другой. Да что рассказывать - смотрите демонстрацию работы плагина до/после.

Кому пригодиться этот скрипт?

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

Также не могут обойти стороной скрипт авторы сайтов и блогов про дизайн. Вы сможете круто показать редизайн сайта или ваше личное видение фасадного ремонта Белого дома. Вообщем, есть где разыграться.

Как установить себе в блог?

Сейчас я расскажу как установить этот скрипт сайту на платформе Blogger.
1. Заходим в Панель управления и выбираем нужны блог.
2. В сайдбаре слева выбираете вкладку Шаблон, а затем на обновившейся странице нажимаете на кнопку Изменить HTML.

3. Кликните левой кнопкой мыши по коду в текстовом поле и нажмите CTRL+F и в том же поле с кодом должно появиться поле Search, как на картинке. В поле поиска вводим </head>.

4. Теперь когда Вы нашли этот тег, нужно перед ним вставить следующий код:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
});
</script> 

Читайте также: Лучшие CSS эффекты при наведении курсора на изображение

5. Найдите строчку,  где у Вас начинается стиль <b:skin> и где рядом, под информацией о шаблоне Вы встретите строчку <Variable name="maincolor" .., если ее нашли, то под этой строчкой вставьте следующий код:

<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/> 

Если не нашли, то вставьте код в любое место после  <b:skin>.

5. Осталось сохранить шаблон и переходить к следующем пункту!

Как работать с плагином эффекта до/после?

Для начала нужно создать новое сообщение и в нужно месте разместить следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

Отдельно загрузите файлы изображений в пост и скопируйте ссылки в нужное место в код сверху. Не забудьте указать свои размеры изображений.

Между прочем, если у Вас есть несколько таких сравнений, то есть отличное решение - нужно добавить всего одну строчку в код перед </head>. Нужно скопировать и изменить номер блока beforeafter. То есть был только beforeafter1, а теперь появиться beforeafter2, beforeafter3 и тд. Код для двух сравнение будет выглядеть так:

HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> 
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function(){
$(&#39;#beforeafter1&#39;).beforeAfter({showFullLinks : false});
$(&#39;#beforeafter2&#39;).beforeAfter({showFullLinks : false});
});
</script> 

А страница сообщение будет иметь следующий код:

<div id='beforeafter1'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

<div id='beforeafter2'>
<div><img alt='before' src='URL изображение ДО' width='400' height='290'/></div>
<div><img alt='after' src='URL изображение ПОСЛЕ' width='400' height='290'/></div>
</div>

Теперь осталось проверить работу скрипта - посмотрите что получилось. У меня получился вот такой результат - смотрите демонстрацию работы плагина до/после . Кстати, друзья, а Вы видели новый трейлер фильма "Первый мститель: Противостояние"? Предлагаю посмотреть и уже начинать ждать эту кинокартину.


На этом всё. За скрипт спасибо CatchMyFame, а всем остальным спасибо, за то что прочитали. Ваши вопросы по работе скрипта пишите в комментах. До скорого!