Image Comparer
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.
Getting Started
Add reference for JavaScript and CSS
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>Add the Component Markup
<div class="image-compare">
<img src="./images/comparer-1.jpg">
<img src="./images/comparer-2.jpg">
</div>Initialize via JavaScript
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).
Building
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.
Clone the Repository
git clone https://github.com/EduardoJM/Image-Comparer.git
cd Image-ComparerInstall Dependencies
npm install Run Gulp Task(s)
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