Before/After Photo Effect with jQuery

If you blog about design or makeup, or if you use before and after image comparison , you'll probably find this script useful. In this tutorial, we'll take a look at adding the Before/After plugin, which is a script that works with jQuery to dynamically render two images at the same time.

To see how it works, click the demo link below and drag the small bar horizontally to see the two images being compared:

Before and after the show

Running this script is very easy. We only need jQuery, text before/after and two images to compare.

How to Add a Before/After Effect to Blogger Photos

Step 1. Go to "Template" and click the "Edit HTML" button. When the HTMK template editor opens, click anywhere in the icon area and press CTRL+F to find this label; press Enter to find it:

Step 2. Before this Paste the following scripts:

The third step. Click the Save Form button to save your changes.

Note If the above script doesn't work, add it above the file tag Also check if you have added jQuery to your template (if so, remove the green line).

The third step. To add as a gadget: Go to Layout and click the Add Gadget link, then select the HTML/Javascript option. Paste this code in the blank field:

Width = '500' Height = '291' />

Width = '500' Height = '291' />

Add the URL of the first image , which should be the "before" image, and the URL of the second image , which should be the "after" image. Also, don't forget to specify the width and height of each image so that it works in all browsers (see the orange part where you need to add the height and width of your images).

If you want to add more images, you'll need to change the container ID. In my example, the container is called beforeafter1 , so you should change it to beforeafter2 , etc., no matter what name you choose.

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

You can add as many before/after images as you like, as long as all the containers have different IDs and the relevant lines are added to the script.

Below each image/image container are "View only before" and "View only after" links which, when clicked, will display the "before" or "after" image. If you want to hide these links, change "true" to "false" in the first code (step 2) and they will no longer appear.

Note If you see empty space around payment icons, look for this symbol on your template:

#ffffff"/>

And change the value of #ffffff to transparent .

Credit: Catch My Glory .