jQuery & jQuery UI Based Image Comparison Slider
File Size: | 138 KB |
---|---|
Views Total: | 2042 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Makes use of jQuery UI to create a slider handle that enables you to compare two overlapping images with a little bit jQuery magic.
See also:
- jQuery Plugin To Compare Two Images Via A Nice Interface - ClassyCompare
- jQuery Before and After Image Comparison Plugin - Image Reveal
- jQuery Plugin For Image Comparison with Mouse Interaction - DiffWidget.js
How to use it:
1. Load the necessary jQuery library and jQuery UI's CSS & Javascript in the document.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
2. Add the 'Before' image into the image comparison slider as follows.
<div class="con"> <img src="before.jpg" class="imageOne"> <div class="coverImage"></div> <div class="handle"></div> </div>
3. The CSS to style the image comparison slider and add the 'After' the images into it using background
property.
.con { width: 562px; height: 300px; border: 2px solid ; position: relative; margin: auto; } .con img { height: 100%; object-fit: cover; position: absolute; } .coverImage { position: absolute; background: url("after.jpg"); background-size: auto 100%; width: 50%; height: 100%; } .handle { width: 0px; height: 100%; border-left: 12px solid #fff; position: absolute; left: 50%; } .handle:after { content: "DRAG"; display: block; width: 60px; height: 60px; border: 2px solid #eee; border-radius: 50%; color: #999; line-height: 60px; font-weight: 300; text-align: center; background: #fff; position: absolute; left: -36px; top: 0; bottom: 0; margin: auto; }
4. The JQuery script to enable the image comparison slider on document ready.
$(".handle").draggable({ axis: "x", containment: "parent", drag: function() { var position = $(this).position(); var positionExtra = position.left + 6; $(".coverImage").width(positionExtra + "px"); } });
This awesome jQuery plugin is developed by Ruddy. For more Advanced Usages, please check the demo page or visit the official website.