Before/After Image Display

Developer
Size
2,134 Kb
Views
8,096

How do I make an before/after image display?

Display before/after images with slider to separate the two. http://www.jqueryscript.net/other/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal.html. What is a before/after image display? How do you make a before/after image display? This script and codes were developed by Boyd Massie on 28 November 2022, Monday.

Before/After Image Display Previews

Before/After Image Display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Before/After Image Display</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/jquery.imageReveal.js"></script>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/jquery.imageReveal.min.css" />
<div class="row big">
<div id="example1" class="imageReveal"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/1-before.jpg" title="Before"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/1-after.jpg" title="After"> </div>
</div>
<div class="row small">
<div id="example2" class="imageReveal"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/2-before.jpg" title="Before"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/2-after.jpg" title="After"> </div>
<div id="example3" class="imageReveal"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/3-before.jpg" title="Cute"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/3-after.jpg" title="Evil"> </div>
<div id="example4" class="imageReveal"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/4-before.jpg" title="Before"> <img src="https://www.jqueryscript.net/demo/jQuery-Before-After-Image-Comparison-Plugin-Image-Reveal/dist/demo/images/4-after.jpg" title="After"> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Before/After Image Display - Script Codes CSS Codes

.row {
float: left;
}
.imageReveal {
margin-right: 20px;
}
.row.small .imageReveal {
display: inline-block;
}
.row.small .imageReveal-caption {
top: auto;
bottom: 20px;
}

Before/After Image Display - Script Codes JS Codes

$(window).load(function() { $('#example1').imageReveal({ barWidth: 15, touchBarWidth: 40, paddingLeft: 0, paddingRight: 0, startPosition: 0.25, showCaption: true, captionChange: 0.5, width: 500, height: 350 }); $('#example2').imageReveal({ barWidth: 15, touchBarWidth: 40, paddingLeft: 60, paddingRight: 60, showCaption: true, startPosition: 0.5, captionChange: 0.5, width: 250, height: 250 }); $('#example3, #example4').imageReveal({ barWidth: 20, touchBarWidth: 40, paddingLeft: 0, paddingRight: 0, showCaption: true, startPosition: 0.5, captionChange: 0.5, width: 250, height: 250 }); $('.example5').imageReveal({ barWidth: 15, touchBarWidth: 40, paddingLeft: 0, paddingRight: 0, showCaption: true, startPosition: 0.5, captionChange: 0.5, width: 250, height: 250 }); });
Before/After Image Display - Script Codes
Before/After Image Display - Script Codes
Home Page Home
Developer Boyd Massie
Username massiebn
Uploaded November 28, 2022
Rating 4.5
Size 2,134 Kb
Views 8,096
Do you need developer help for Before/After Image Display?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boyd Massie (massiebn) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!