FF2+ IE9+ Opr10+

Before and After image script

  Author: Dynamic Drive

Description: Nothing ever stays the same, which is why we created this Before and After script to easily view an "after" version of any image as an overlay of the original one. It makes for a dramatic way of comparing two images and any subtle differences. A draggable handle bar lets the user decide how much of each image he/she wishes to view. The script supports the following two nifty features:

  • The "before" and "after" slides can each contain not just a main image, but other HTML as well, such as a caption.

  • The script can load another set of images on demand.

Use the Before and After image script on any set of images where you wish to highlight the difference between the old and new shot, such as pictures of a model pre and post touch up, an picture after witty annotates had been inserted, or a subject after striking weight lost. The possibilities are countless.

Demo:

BEFORE
AFTER
Show "after" image fully Show "before" image fully
Show "after" image 70% Show "after" image 20%
Load new set of images


Directions Developer's View

Step 1: Add the below code inside the <HEAD> section of the page:

Select All

The above code references two external files which you should download below (right click, and select "Save As"):

Step 2: Insert the below sample code into the BODY section of your page:

Select All

The code of Step 2 illustrates the HTML markup of a before and after image set up, which looks like the following:

<div id="baf" class="beforeandafter">

 <div class="before">
  <img src="before.jpg" />
  <span class="caption">BEFORE</span>
 </div>

 <div class="after">
  <img src="after.jpg" />
  <span class="caption">AFTER</span>
 </div>

</div>

It should consist of an outer container carrying an unique ID and CSS class of "beforeandafter". Inside this DIV should be two child DIVs with class names "before" and "after". It is inside each of these DIVs that you define the HTML to be shown for the "before" and "after" frames. Each frame should consist of a single <IMG> tag along with additional arbitrary bits of HTML such as a caption DIV, SPAN etc to show.

Initialization of the script

To initialize the script to display an instance of Before and After image script, call new ddeforeandafter() in the HEAD section of your page after the document has loaded:

jQuery(function(){ // after DOM has loaded
 uniquevariable = new ddbeforeandafter({
  //comma separated options here
 })
})

Where "uniquevariable" should be an arbitrary but unique variable (for each instance of Before/After image script), and options is an object literal containing the desired settings. For example:

jQuery(function(){ // after DOM has loaded
 uniquevariable = new ddbeforeandafter({
  wrapperid: 'baf',
  revealduration: 1.5
 })
})

Here's an explanation of each option:

options Description
wrapperid: string

Required

The ID of the main DIV container for this instance of Before and After Image script.
initialreveal: ['amount', duration]

Defaults to ['30%', 1]

Sets the amount of the "after" image to reveal automatically and the duration it takes when the page loads. The first parameter 'amount' should be a percentage string between '0' and '100%', while the duration parameter is an integer indicating the duration in seconds. The following setting for example would have the "After" image cover 80% of the original image by default after an animation of 2 seconds:

initialreveal: ['80%', 2]

revealduration: duration

Defaults to 0.4

The duration of the reveal effect each time the container is clicked on to reveal the desired portion of the "after" image, in seconds. Defaults to 0.4 (seconds).
hidedragbardelay: duration

Defaults to 1

Sets the delay after the mouse moves out of the "before/after" image container before the draggable bar is faded out to obscure it from view, in seconds.
dragUI: 'string'

Defaults to '<div class="drag"><div class="draghandle"></div></div>'

Sets the HTML for the draggable bar interface, which in general you should not need to edit. The modify its style, edit ddbeforeandafter.css, specifically, the "drag" and "draghandle" classes for color, dimensions etc.

If you wish to edit the interface's HTML, maintain the default CSS classes used and the markup hierarchy, specifically, the draghandle element being nested inside drag.

initialrevealeasing: 'string'

Defaults to 1'cubic-bezier(0.390, 0.575, 0.510, 1.650)'

Sets the CSS3 transition-timing-function value used to animate the "after" image into view when the page loads (also see the initialreveal option above). The acceptable value is any string valid to this CSS3 property. The default value specifies a bezier function that creates a push pull effect. See this page to generate a different custom bezier based effect.

Once the script is initialized, it also exposes two methods to update it on demand. The methods are:

method Description
scriptinstance.unveil(amt, [dur]) Reveals the "after" image by a certain amount on demand. scriptinstance should be the unique but arbitrary variable name you set new ddbeforeandafter() to when initializing the script. The unveil() function supports 2 parameters:
  • amt: Enter the desired amount of the "after" image to reveal as a percentage string from "0%" to "100%", for example, "80%" or "20%".
  • [dur]: Optional parameter that sets the duration of the unveil effect in seconds as an integer, such as 2 for 2 seconds. Defaults to the duration defined by options.revealduration above.

The below creates two links that set a "before/after" image to fully hide and reveal the "after" image, respectively:

<a href="#" onClick="uniquevar.unveil('0%'); return false">Hide after image</a>
<a href="#" onClick="uniquevar.unveil('100%'); return false">Show after image</a>

scriptinstance.reload(beforeafterhtml, dimensions) Reloads the contents of a Before and After image script instance or change its dimensions on demand. scriptinstance should be the unique but arbitrary variable name you set new ddbeforeandafter() to when initializing the script. The reload() function supports the following two parameters:
  • beforeafterhtml: An array of two strings specifying the full HTML for the "before" image DIV and "after" DIV, respectively. Usually this would consist of just two <IMG> tags, though it can further include other HTML to act as captions or descriptions etc.
  • dimensions: An array of two integers specifying the new width and height of the before/after image container, in pixels.

Either options can be set to null to bypass it , choosing only the option you wish to utilize. The following illustrates calling scriptinstance.reload() to reload a Before and After image on demand:

// update before and after images
uniquevar.reload(['<img src="newbefore.jpg" />', '<img src="newafter.jpg" />'])

// update container dimensions only
uniquevar.reload(null, [700, 400])

// update both images and dimensions
uniquevar.reload(['<img src="newbefore.jpg" />', '<img src="newafter.jpg" />'], [700, 400])

 

Reloading a before/after image script instance with a different set of images

When calling  scriptinstance.reload() to update the set of images shown by a "Before/After" script instance, it's easier to define an outer function that in turn calls the reload() method with the desired parameters, for example:

<script>

function updatebeforeafter(){
 bafinstance.reload(['<img src="newbefore.jpg" /><span class="caption">New Before</span>', '<img src="newafter.jpg" /><span class="caption">New After</span>'])
}

</script>

 We'll use the above function with the following "Before/After" image instance to update its images when a link is clicked on:

<script>
jQuery(function(){ // after DOM has loaded
 bafinstance = new ddbeforeandafter({
  wrapperid: 'baf'
 })
})
</script>

<div id="baf" class="beforeandafter">

 <div class="before">
  <img src="before.jpg" />
  <span class="caption">BEFORE</span>
 </div>

 <div class="after">
  <img src="after.jpg" />
  <span class="caption">AFTER</span>
 </div>

</div>

<a href="#" onClick="updatebeforeafter(); return false">Update before and after images</a>

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post