Minimal Image Comparison Slider with jQuery - compareJS
File Size: | 3.09 KB |
---|---|
Views Total: | 748 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
compareJS is a very small (~2kb unminified) jQuery plugin to create a smooth comparison slider to help you compare the difference of two overlapping images.
How to use it:
1. Add before / after images together with the comparison slider control to the web page.
<div id="imgContainer"> <div id="leftImg"> <img src="before.jpg" draggable = 'false'></div> <div id="rightImg"> <img src="after.jpg"> </div> <div id="dragbar"> <div id="dragCircle"> <span id="lineDash">–<br />–<br /> –</span> </div> </div> </div>
2. Add jQuery library and the jQuery compareJS script to the webpage.
<script src="jquery.min.js"></script> <script src="compareJS.js"></script>
3. The required CSS styles.
#imgContainer { width: 860px; height: 470px; margin: 0 auto; position: relative; overflow: hidden; } #leftImg { height: 470px; width: 860px; position: absolute; overflow: hidden; left: 0px; } #rightImg { height: 470px; position: absolute; overflow: hidden; right: 0px; z-index: 10; } #dragbar { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; background-color: rgba(20,20,20,.6); left: 100%; z-index: 20; } #dragCircle { width: 14px; height: 70px; position: absolute; left: -3px; top: 45%; background-color: rgba(10,10,10,.9); z-index: 50; border-radius: 3px; } #lineDash { position: absolute; width: 8px; height: 8px; color: white; font-size: 18px; text-align: center; text-decoration: bold; z-index: 100; line-height: 5px; margin-top: 30px; left: 3px; }
This awesome jQuery plugin is developed by alexandraestrada. For more Advanced Usages, please check the demo page or visit the official website.