Multi-image Comparison Plugin For jQuery - mbac.js

Multi-image Comparison Plugin For jQuery - mbac.js

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.

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.

  • Publication date: 30.03.2018
  • Source