Accordion-style Multi-image Comparison Plugin - jQuery Imagecompare

A super small and fully responsive jQuery image comparison plugin that lets you compare multiple images in an accordion-style interface. When you hover your mouse over an image, it will zoom to full size and completely cover the other images.

With this plugin, you can easily create an interactive image viewing experience for your visitors and help them see the details of each image. Simply hover over an image to zoom in and compare it to the others.

How to use it:

1. To get started, include the jQuery Imagecompare plugin's files on the page.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- jQuery Imagecompare -->
<link rel="stylesheet" href="/jquery.imagecompare.min.css" />
<script src="/jquery.imagecompare.min.js"></script>

2. Add your images into an HTML list with the CSS class of 'jqueryImageCompare'.

<ul class="jqueryImageCompare">
  <li data-image="1.jpg"></li>
  <li data-image="2.jpg"></li>
  <li data-image="3.jpg"></li>
  <li data-image="4.jpg"></li>
  <li data-image="5.jpg"></li>
  ...
</ul>

3. Set the aspect ratio of the image comparison tool. Default: 3:1.

<ul class="jqueryImageCompare" data-ratio="4x3">
  <li data-image="1.jpg"></li>
  <li data-image="2.jpg"></li>
  <li data-image="3.jpg"></li>
  <li data-image="4.jpg"></li>
  <li data-image="5.jpg"></li>
  ...
</ul>

4. Add vertical titles to images.

<ul class="jqueryImageCompare" data-ratio="4x3">
  <li data-image="1.jpg" data-title="Image title"></li>
  <li data-image="2.jpg" data-title="Image title"></li>
  <li data-image="3.jpg" data-title="Image title"></li>
  <li data-image="4.jpg" data-title="Image title"></li>
  <li data-image="5.jpg"></li>
  ...
</ul>

Changelog:

2023-02-04

• Added vertical titles

---

This awesome jQuery plugin is developed by articks. For more Advanced Usages, please check the demo page or visit the official website.