As a photographer there are oftentimes when you want to display a "Before" and "After" comparison.  Or to make a more compelling website/blog post you need to have a unique way of displaying two images.  Frequently you'll see a side-by-side comparison.  While this does the trick, it's just not nearly as FUN as a SLIDER (SEE THE VERY BOTTOM EXAMPLE).

Examples of sliders: 

Zurb article

Demosthenes.Info

And this example where I got enormous help from Bertrand.

The link where I saw a slider for the first time was this post.

Great examples of when to use this are pre and post Photoshop/Lightroom, comparing the same people at different points in time (which is what my example displays), and construction photos of a home in progress.

To create this you do have to have some ability to do HTML and specifically JQuery.  If you do not, then you may want to hire a designer who can help you do this.  

My Example:

Now I could just post the two photos I want to show like this (these are images taken 4 years apart):

Typical BEFORE and AFTER PhotosTypical BEFORE and AFTER Photos Typical BEFORE and AFTER PhotosTypical BEFORE and AFTER Photos

NOW CHECK IT OUT!  Doesn't this BEFORE and AFTER Slider make a nice impact?  A HUGE thank you to Bertrand Hui Photography for his guidance in showing me how to do this. THANK YOU!

Just move the red slider back and forth - cool isn't it?

Questions or comments? Feel free to leave them below!

• BEFORE

  AFTER
  Show "after" image fully Show "before" image fully

  Show "after" image 70% Show "after" image 20%