Introducing “TwentyTwenty,” a plugin that allows intuitive comparison of two before-and-after images. Image comparison is a highly useful feature in web design and content creation, helping visually demonstrate the state before and after changes.
In this article, we will explain three implementation patterns with step-by-step instructions: “Basic Usage,” “Vertical Comparison,” and “Side-by-Side Comparison.” This guide ensures easy implementation, so feel free to refer to it.
Integrating the TwentyTwenty Plugin
First, let’s start by loading the CSS files required for using the plugin. This plugin needs two CSS files: foundation.css and twentytwenty-no-compass.css. You can easily integrate them by adding the following code to the head section of your HTML file:
<link href="css/foundation.css" rel="stylesheet" type="text/css" />
<link href="css/twentytwenty-no-compass.css" rel="stylesheet" type="text/css" />
With this, you are ready to apply the basic styles of the plugin.
Creating the HTML Structure
Next, let’s create the HTML structure to display the before-and-after images. We will implement three patterns: “Basic Usage,” “Vertical Direction,” and “Side-by-Side Display.” Let’s take a closer look at each pattern.
1. Basic Usage
The basic usage allows image comparison by sliding them left and right. Here is the HTML structure:
<div class="row" style="margin-top: 2em;">
<div class="large-4 columns">
<h3>Basic Usage</h3>
<p>This demonstrates the basic usage of the plugin.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
In this code, insert two images within a div tag with the class twentytwenty-container. The plugin automatically overlays the images and makes them comparable using a slider.
2. Vertical Comparison
Next is the pattern for vertical sliding. Adding the data-orientation="vertical" attribute enables vertical comparison of images.
<div class="row" style="margin-top: 2em; margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Vertical Direction</h3>
<p>This demonstrates vertical sliding.</p>
</div>
<div class="large-8 columns">
<div class="twentytwenty-container" data-orientation="vertical">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
This setting allows vertical sliding to compare before-and-after images.
3. Side-by-Side Comparison
Finally, let’s look at displaying multiple before-and-after images side by side. This is useful for making multiple comparisons on the same page.
<div class="row" style="margin-bottom: 2em;">
<div class="large-4 columns">
<h3>Side-by-Side</h3>
<p>Using multiple comparisons simultaneously.</p>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
<div class="large-4 columns">
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
</div>
</div>
In this pattern, three before-and-after images are displayed side by side, allowing individual comparisons.
Activating the Plugin with JavaScript
Now, let’s configure the plugin using JavaScript. Load the necessary JavaScript files and initialize the plugin for the target comparison areas.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
});
</script>
The parameter default_offset_pct sets the initial display position of the before-and-after images: 70% for horizontal comparisons and 30% for vertical comparisons.
【JavaScript】Demo of the TwentyTwenty Plugin
To see the plugin in action, refer to the demo page via the link below:
【JavaScript】Demo of the TwentyTwenty Plugin
Source: TwentyTwenty
Conclusion
In this article, we explained how to implement and use the JavaScript plugin “TwentyTwenty” for comparing before-and-after images. From basic usage to vertical comparison and simultaneous multiple comparisons, various patterns are covered. Use these features to provide visually compelling content on your website.
