Before/After Photograph Upshot Amongst Jquery

If y'all bring a pattern or makeup blog, or if y'all are using before as well as later prototype comparison, this script volition almost probable live useful for you. In this tutorial, y'all volition come across how to add together the Before/After plugin, a script that plant alongside jQuery inward guild to display 2 pictures dynamically for comparing them at the same time.

To come across how it works, click on the demo link from below as well as drag horizontally the minor bar to come across both images that are beingness compared:

Before & After Demo

Implementing this script is actually easy. We simply involve jQuery, the Before/After script, as well as the 2 images to compare.

How to add together Before/After Effect on Blogger Images

Step 1. Go to "Template" as well as click on the "Edit HTML" button. Once the template HTMK editor opens up, click anywhere within the code expanse as well as press the CTRL + F keys to search for the next tag - hitting Enter to detect it:

Step 2. Right earlier glue the next scripts:

Step 3. Click the "Save template" push clit to salvage your changes.

Note: if the higher upward script doesn't piece of employment for you, add together it higher upward the tag. Also, delight come across if y'all bring added jQuery inward your template (if y'all did so, therefore withdraw the business inward green).

Step 3. To add together it every bit a gadget - instruct to "Layout" as well as click on the "Add a gadget" link, therefore select "HTML/Javascript" option. Paste this code within the empty box:

width='500' height='291'/>

width='500' height='291'/>

Add the URL of the kickoff image that is the "Before" image, as well as the URL of the minute image that should live the "After" image. Also, don't forget to specify the width as well as pinnacle of each picture, therefore that they piece of employment on all browsers (see the share inward orangish where y'all involve to add together the pinnacle as well as width of your images).

If y'all desire to add together to a greater extent than images, y'all volition involve to alter the ID of the container. In my example, the container is called beforeafter1, therefore y'all volition involve to alter it to beforeafter2 as well as therefore on, although, y'all tin select whatever name.

Then, add together some other line, similar the blueish 1 from below, inward the kickoff code that y'all added inward measuring 2:

You tin add together every bit many before/after images every bit y'all want, every bit long every bit all containers bring a unlike ID as well as the corresponding lines are added inward the script.

Below each prototype /photo container are the "Show exclusively Before" as well as "Show exclusively after" links that 1 time clicked, volition display the "before" or "after" picture. If y'all desire to enshroud these links, therefore simply alter "true" to "false" inward the kickoff code (step 2) as well as they volition non live displayed anymore.

Note: if y'all come across white infinite to a greater extent than or less the drag icons, therefore search for this code inward your template:

  
     #ffffff"/>

And alter the #ffffff value to transparent.

Credit: Catch my fame.