Multi-image Comparison Plugin For jQuery - mbac.js

Multi-image Comparison Plugin For jQuery - mbac.js
File Size: 1.93 MB
Views Total:
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="" 
<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>

3. Call the function on the top container. Done.


4. Possible plugin to customize the image comparison plugin.

    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.