Для дизайнеров, для тех кто занимается моделированием или выполняет редактирование в редакторе Adobe Photoshop и еще для многих случаев и профессий человеческой деятельности, нужно показать результат работы до и после. Этим часто пользуются производители плагинов для графических редакторов. Ведь для них нужно показать работу плагина по сравнению с оригинальным изображением.
Можно просто выставить два фото и подписать до и после. Но такой подход будет выглядеть не только некрасиво, но и не профессионально. Поэтому нужно использовать скрипт и подстроить его к своему сайту (бесплатных скриптов подобной функциональности достаточно) или установить готовое решение – плагин Before/After. После реализации проекта при помощи плагина фото будет разделено на две части с кнопкой для перемещения, двигая которую можно видеть изображение до (после будет скрыто) и после (до будет скрыто).
Плагин реализован на JavaScript и весит несколько килобайт. А значит, в нем все минимизировано и просто. Также вы не увидите никаких ссылок, в том числе скрытых. Это означает, что плагин, абсолютно бесплатный и не содержит рекламы. Конечно, если у вас есть возможность, то можете отблагодарить автора плагина.
Чтобы плагин работал нужно чтобы 2-а ваших изображения были одинакового размера. Эти изображения должны быть помещены в теги <div>. Также для каждого из изображений должна быть указана ширина и высота.
После установки перейдите в менеджер плагинов и включите его. Можно воспользоваться поиском, введя: Before/After.
На вкладке «Описание» вы можете прочитать краткую инструкцию по использовании плагина.
Вкладка «Plugin Defaults» – это уже непосредственные настройки плагина. В частности, здесь имеется опция «imagePath» – путь к вашим изображениям. Рекомендую для этих целей выделить отдельную папку.
Вот примерный код, должен работать (с условием, что папка с изображениями содержится по пути: images/foto.
<div class="plg_content_beforeafter">
<div><img src="images/foto/before.jpg" alt="before" width="375" height="500" /></div>
<div><img src="images/foto/after.jpg" alt="after" width="375" height="500" /></div>
</div>
Вступительный скриншот – это результат моей реализации плагина на локальном сервере. Но не выводились кнопки и плагин толком не заработал. Возможно, на реальном хостинге будет нормально. Пробуйте, тестируйте. Это единственный бесплатный мною найденный плагин для CMS Joomla.