Tank Overhaul (WEB Slider Effect) Before & After Compare (2 Photos)

Wally.B · 04/30/2015, 12:02 AM

** THE URL below will take you to My Demo Web Page where you can see a before an after picture of my Fish tank Using an picture overlay and a Working slider to compare **

** PLEASE NOTE:
** ONLY WORK WITH "CHROME" or "FIREFOX" browsers
** Will not work with "IE" **

** First Working Sample #1 (( Before and After Tank Overhaul ))) **

http://wworld.atspace.cc/SliderDemo/ <---Click Here

I taken tons of pictures of my fish tanks over the years to compare things like coral growth, health, arrangement changes etc.

Regular side by side, or flips between images was ok, but wanted something better to really compare more accurately.

Found some code on the web and got a great image comparison effect working. (got the idea from a Web site showing Satellite image comparisons, before and after a tsunami)
All you need to two Photo's, same resolution. This is done purely with HTML & a CSS (Cascading Style Sheet). There are many other ways. This method was simple.
I didn't write the code. Copied & edited it to change to my own images. I give proper credit to original author at bottom of page.

I only passed it around to a couple of firend for testing, so it not 100% bullet proof tested. I know it works on my Chrome Brower, Also on Firefox. Won't work on IE. (Tested on a PC, Kind of worked on my Tablet).

The way it works when it works, is you should see the first Fish Tank image. Then a brief slider demo between fist & second image.
Then if you click on the slider (left side of image) you can slide back and forth to compare the two images.

Check it out, by clicking on the URL above.

Pretty Neat eh?

Wally.B · 04/30/2015, 10:19 PM

Fixed a small bug. Should work better now.

04/30/2015, 12:02 AM	#1
Wally.B Registered Member Join Date: Oct 2014 Location: Toronto GTA,Canada Posts: 1,763	Tank Overhaul (WEB Slider Effect) Before & After Compare (2 Photos) THE URL below will take you to My Demo Web Page where you can see a before an after picture of my Fish tank Using an picture overlay and a Working slider to compare PLEASE NOTE: ONLY WORK WITH "CHROME" or "FIREFOX" browsers Will not work with "IE" First Working Sample #1 (( Before and After Tank Overhaul ))) http://wworld.atspace.cc/SliderDemo/ <---Click Here I taken tons of pictures of my fish tanks over the years to compare things like coral growth, health, arrangement changes etc. Regular side by side, or flips between images was ok, but wanted something better to really compare more accurately. Found some code on the web and got a great image comparison effect working. (got the idea from a Web site showing Satellite image comparisons, before and after a tsunami) All you need to two Photo's, same resolution. This is done purely with HTML & a CSS (Cascading Style Sheet). There are many other ways. This method was simple. I didn't write the code. Copied & edited it to change to my own images. I give proper credit to original author at bottom of page. I only passed it around to a couple of firend for testing, so it not 100% bullet proof tested. I know it works on my Chrome Brower, Also on Firefox. Won't work on IE. (Tested on a PC, Kind of worked on my Tablet). The way it works when it works, is you should see the first Fish Tank image. Then a brief slider demo between fist & second image. Then if you click on the slider (left side of image) you can slide back and forth to compare the two images. Check it out, by clicking on the URL above. Pretty Neat eh? Last edited by Wally.B; 04/30/2015 at 12:29 AM.

04/30/2015, 10:19 PM	#2
Wally.B Registered Member Join Date: Oct 2014 Location: Toronto GTA,Canada Posts: 1,763	Fixed a small bug. Should work better now.