Очень полезный скрипт который здорово украшает сайт и добавляет ему интерактивности. Диапазон применения очень широк. Буквально на сайте любой тематики фотографии с чем-либо можно преподнести используя такой прием.

Сейчас предлагаю к вниманию вам 2 варианта.

Первый вариант используя плагин plg_content_beforeafter-1.3

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

Далее в материал вставляем следующий текст. Вставлять надо его как код, используя соответствующие плагины или просто отключив редактор, например JCE.


<div class="plg_content_beforeafter">
<div><img src="/images/exam/p/before.jpg" alt="before" width="600" height="366" /></div>
<div><img src="/images/exam/p/after.jpg" alt="after" width="600" height="366" /></div>
</div>


Второй вариант используя скрипт. Сам скрипт качаем тут

Распакуйте архив, откройте html-файл в браузере и все, для понимания как все устроено этого примера хватит.

Кстати, один из вариантов такого скрипта ренее уже я писал здесь.

Еще добавлю к этому варианту. Тут можно реализовать как вставками отдельных html страниц так и тексте материала. Опять же, код вставляем в отключив редактор.



<link type="text/css" href="/http://joomla4.ru/images/before-after/before-after.min.css" rel="stylesheet">
<div class="ba-slider">
<img src="/http://joomla4.ru/images/before-after/foto/111.jpg">
<div class="resize">
<img src="/http://joomla4.ru/images/before-after/foto/222.jpg">
</div>
<span class="handle"></span>
</div>
<script type="text/javascript" src="/http://joomla4.ru/images/before-after/jquery.min.js"></script>
<script type="text/javascript" src="/http://joomla4.ru/images/before-after/before-after.min.js"></script>
<script type="text/javascript">
$('.ba-slider').beforeAfter();
</script>


Тут не забываем менять пути на свои. Их можно записать полность или же относительно корня своего сайта на хостинге. 

Вот и пример реализации этого кода