I recently published an article that compared old photos of Tongwynlais with how they look today. The post was really popular and several people asked me how I created it.

These types of image comparison sliders are quite popular at the moment and very effective in showing the differences between 2 images. Buzzfeed use the this type of tool in their popular celebrity now and then articles and they are useful in many industries to demonstrate how their product works.

The technique is fairly simple CSS and JavaScript at its core, the difficulty for me was finding a reliable and fully tested WordPress solution that I could simply apply. I found a couple of plugins that looked promising but they were either not very well supported or didn’t exactly match my requirements.

In the end I decided to use the CSS and JavaScript files directly from the excellent solution by ZURB Studios. ZURB are the authors of the popular Foundation 5 front-end framework.

The first thing to do is find your before and after photos and resize them to try and get key elements in the same place so the images transition smoothly. In the examples from Buzzfeed, they manage to get the eyes, nose and mouth in the same place so the image doesn’t shift significantly as you move the slider.

With buildings and landscapes it’s hard to get the angles and distances perfectly aligned. I found it handy to have a copy of the old photo on my phone to compare against the new shot. It may be impossible to stand in the perfect spot if new buildings have been constructed so try to get key elements as close as possible.

When you have both images, you’ll need to crop and resize them so they’re the same size and that the main features align as best as possible. I made one image semi transparent using image editing software to help get the images as closely matched as possible.

If you have a self-hosted WordPress site or similar CMS and you’re familiar with FTP, you can follow these steps to create an image slider:

1. Download the files from ZURB’s website
2. Upload jquery.event.move.js, jquery.twentytwenty.js and twentytwenty.css to your website (If your CMS doesn’t already have jQuery, you’ll need to upload this too)
3. Create a new post and add references to these files (The URL will depend on where you placed the files)
4. Upload your images and put them in the following HTML

<div id=”container1″ class=”twentytwenty-container”>

<img src=”http://yoursite.com/imagebefore.jpg” alt=”Image Before” width=”800″ height=”400″ />

<img src=”http://yoursite.com/imageafter.jpg” alt=”Image After” width=”800″ height=”400″ />

</div>

• Add the following HTML to call the Twenty Twenty function (I replaced “$” with “jQuery” to avoid any conflicts with other libraries)

<script>

jQuery(window).load(function(){

 jQuery(“.twentytwenty-container”).twentytwenty();

});

</script>

• I edited the CSS file to replace the text “Before” and “After” with “Then” and “Now”.
• Publish the post and you should see your image slider magically work!

There are full instructions on ZURB’s website. There are other solutions that you might like to try. CodyHouse use CSS3 and jQuery. JotForm have a similar solution on GitHub. Before After Slider is a paid WordPress plugin.

Download – Zurb Twenty Twenty