Для дизайнерів, для тих хто займається моделюванням або виконує редагування у редакторі 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.
