Before/After Photo Effect with jQuery

If you have a design or makeup blog, or if you are using before and after image comparison, this script will most likely be useful for you. In this tutorial, you will see how to add the Before/After plugin, a script that works with jQuery in order to display two pictures dynamically for comparing them at the same time.

To see how it works, click on the demo link from below and drag horizontally the small bar to see both images that are being compared:

Implementing this script is really easy. We just need jQuery, the Before/After script, and the two images to compare.

How to add Before/After Effect on Blogger Images

Step 1. Go to "Template" and click on the "Edit HTML" button. Once the template HTMK editor opens up, click anywhere inside the code area and press the CTRL + F keys to search for the following tag - hit Enter to find it:

Add the URL of the first image that is the "Before" image, and the URL of the second image that should be the "After" image. Also, don't forget to specify the width and height of each picture, so that they work on all browsers (see the part in orange where you need to add the height and width of your images).

If you want to add more images, you will need to change the ID of the container. In my example, the container is called beforeafter1, so you will need to change it to beforeafter2 and so on, although, you can choose any name.

Then, add another line, like the blue one from below, in the first code that you added in step 2:

You can add as many before/after images as you want, as long as all containers have a different ID and the corresponding lines are added in the script.

Below each image /photo container are the "Show only Before" and "Show only after" links that once clicked, will display the "before" or "after" picture. If you want to hide these links, then just change "true" to "false" in the first code (step 2) and they will not be displayed anymore.

Note: if you see white space around the drag icons, then search for this code in your template:

9 comments:

What version of the beforeafter.js file are you using? I cannot make this work with the original file from Catch my fame, but your version works. Can you describe the changes you had to make to the original file to make this work?

Please make sure that you have only one version of jQuery in your template - you can verify this by going to your template and searching for jquery.com keyword. If you find it more than once, then you should remove the other duplicates. The script should look similar to the one above in green. After you have removed the scripts, you can safely add the one from step 1. And don't forget to backup your current template. Sorry for the late reply!

Hello. I really like your plugin and was wondering if you know of anyone who has combined it with a thumbnail gallery plugin so that the web user can choose from any number of thumbnails to view, that load into a larger image(s) with the before after effect? If you are aware would you mind pointing me in the right direction?