Очень полезный скрипт который здорово украшает сайт и добавляет ему интерактивности. Диапазон применения очень широк. Буквально на сайте любой тематики фотографии с чем-либо можно преподнести используя такой прием.
Сейчас предлагаю к вниманию вам 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>
Тут не забываем менять пути на свои. Их можно записать полность или же относительно корня своего сайта на хостинге.
Вот и пример реализации этого кода