Cocoen — сравнение изображений до и после
Визуальное сравнение двух изображений одного и того же момента, но при разных условиях. Передвигая бегунок слева направо или в обратном направлении можно наглядно сравнить состояния До и После.
HTML
Для правильного применения стилей, нужно сохранить наличие класса cocoen.
1 2 3 4 | <div class="cocoen"> <img src="img/before.jpg" alt=""> <img src="img/after.jpg" alt=""> </div> |
CSS
В шапке подключаем стили скрипта
1 | <link rel="stylesheet" href="css/cocoen.min.css"> |
JS
Скрипт можно вызывать на чистом jаvascript
1 2 3 4 5 6 | <script src="js/cocoen.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function(){ new Cocoen(); // или new Cocoen(document.querySelector('.cocoen')); }); </script> |
Если на одной странице будет несколько разных блоков .cocoen, то инициализацию скрипта нужно выполнять так:
1 2 3 | document.querySelectorAll('.cocoen').forEach(function(element){ new Cocoen(element); }); |
Скрипт поддерживает вызов, как jQuery плагин, в этом случае его нужно вызывать так:
1 2 3 4 5 6 7 8 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/cocoen.min.js"></script> <script src="js/cocoen-jquery.min.js"></script> <script> $(function(){ $('.cocoen').cocoen(); }); </script> |
подключив предварительно jQuery библиотеку, и дополнительный файл cocoen-jquery.min.js
Исходники: cocoen
Ссылки