This component is created (in the first time, based on MetroUI component code) for my personal use in my materialize pages. The component visual is see in the image below.
Includes the image comparer css and javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/EduardoJM/Image-Comparer@1.0.3/dist/css/image-comparer.min.css" />
<title>Document</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/gh/EduardoJM/Image-Comparer@1.0.3/dist/js/image-comparer.min.js"></script>
</body>
</html><div class="image-compare">
<img src="./images/comparer-1.jpg">
<img src="./images/comparer-2.jpg">
</div>var el = document.querySelector('.image-compare');
var comp = new ImageCompare(el, options);For more informations see the documentation (the documentation is in development for now, then sorry for bad explained things for now).
In the ./dist/ folder has a builded distribution of the javascript and the css. The source javascript and css files is disponible in the ./src/ folder and can be builded using the gulp.
git clone https://github.com/EduardoJM/Image-Comparer.git
cd Image-Comparernpm install To build the css and the javascript files, run the tasks:
gulp css
gulp jsIf you want to watch for javascript source files modification, use the task:
gulp watchJSAnd if you want to watch for css source files modification, use the task:
gulp watchcss