Multi-image Comparison Plugin For jQuery - mbac.js
File Size: | 1.93 MB |
---|---|
Views Total: | 1826 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
mbac.js is a fancy image comparison jQuery plugin which enables you to compare the differences between multiple images on hover. Useful for multiple before and after images.
How to use it:
1. Insert jQuery JavaScript library and the plugin's files into the html file.
<link rel="stylesheet" href="mbac.css"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script> <script src="mbac.js"></script>
2. Create a list of images you want to compare.
<div class="mbac-wrap"> <ul class="mbac"> <li><img src="1.jpg" alt="Alt 1"></li> <li><img src="2.jpg" alt="Alt 2"></li> <li><img src="3.jpg" alt="Alt 3"></li> <li><img src="4.jpg" alt="Alt 4"></li> </ul> </div>
3. Call the function on the top container. Done.
$(document).ready(function(){ $('.mbac-wrap').mbac(); });
4. Possible plugin to customize the image comparison plugin.
$(document).ready(function(){ $('.mbac-wrap').mbac({ width: _width, height: "auto", animduration: 450, // length of transition animspeed: 4000, // delay between transitions target: "ul.mbac", z_index: 500, responsive: false }); });
This awesome jQuery plugin is developed by janduds. For more Advanced Usages, please check the demo page or visit the official website.