Compare Two Overlapping Images Using Juxtapose.js

Preview:

Description:

Juxtapose.js is a stand-alone Javascript library that allows you to compare two overlapping images with a before/after slider.

How to use it:

Include the juxtapose.css in the head section of the web page.

<link rel="stylesheet" href="juxtapose/css/juxtapose.css">

Add two overlapping images  into your web page as follows. Use Html5 data-startingposition to specify the starting position of the before/after slider.

<div class="juxtapose" data-startingposition="30%">
  <img src="1.jpg" data-label="Before" alt="Before">
  <img src="2.jpg" data-label="After" alt="After">
</div>

Include the juxtapose.js at the bottom of the web page. That’s it.

<script src="juxtapose/js/juxtapose.js"></script>

Enable/disable the animation.

<div class="juxtapose" data-startingposition="30%" data-animate="true">
  <img src="1.jpg" data-label="Before" data-credit="CSSScript Before" alt="Before">
  <img src="2.jpg" data-label="After" data-credit="CSSScript After" alt="After">
</div>

Add credit info to the before/after images.

<div class="juxtapose" data-startingposition="30%">
  <img src="1.jpg" data-label="Before" data-credit="CSSScript Before" alt="Before">
  <img src="2.jpg" data-label="After" data-credit="CSSScript After" alt="After">
</div>

You can also create a dynamic image comparison component using JavaScript:

<div ide="demo">
</div>

slider = new juxtapose.JXSlider('#JXSlider',
  [
    {
      src: 'before.jpg',
      label: 'Before',
      credit: 'Image Credit Info'
    },
    {
      src: 'after.jpg',
      label: 'After',
      credit: "Image Credit Info"
    }
  ],
  {
    animate: true,
    showLabels: true,
    showCredits: true,
    startingPosition: "50%",
    makeResponsive: true
});

Update the image comparison slider programmatically.

JXSlider.updateSlider(percentage, animate);

Changelog:

12/06/2022

• v1.2.2