Author: | NUKnightLab |
---|---|
Views Total: | 607 views |
Official Page: | Go to website |
Last Update: | December 6, 2022 |
License: | MIT |
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-startingpositio
n 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