Сравнение изображения до и после с библиотекой Cocoen

Сравнение изображения до и после с библиотекой Cocoen

Визуальное сравнение двух изображений одного и того же момента, но при разных условиях. Передвигая бегунок слева направо или в обратном направлении можно наглядно сравнить состояния До и После.

Сравнение изображения до и после с библиотекой Cocoen

HTML


<div class="cocoen">
    <img src="img/before.jpg" alt="">
    <img src="img/after.jpg" alt="">
</div>

Для правильного применения стилей, нужно сохранить наличие класса cocoen.

CSS


<link rel="stylesheet" href="css/cocoen.min.css">

JS

Скрипт можно вызывать на чистом jаvascript


<script src="js/cocoen.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        new Cocoen(); // или new Cocoen(document.querySelector('.cocoen'));
    });
</script>

Если на одной странице будет несколько разных блоков .cocoen, то инициализацию скрипта нужно выполнять так:


document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});

Скрипт поддерживает вызов, как jQuery плагин, в этом случае его нужно вызывать так:


<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

Ссылки на исходники
Просмотров: 49
Комментариев нет

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Заполните поле
Заполните поле
Пожалуйста, введите корректный адрес email.
Вы должны согласиться с условиями для продолжения

Больше похожих постов

Меню