How is this done? (sliding from pic to pic)

Canon EF 100mm f/2.8L Macro IS USM

01/18/2013 05:48:09 AM · #1

I am sorry, I don't even know what this is called, let alone how to achieve it.

Here is an example: Obama before and after.

Is it Flash? I have some old version of Flash, but NO clue how to use it. If I knew what it was called, perhaps I could find a tutorial.

Could some of you clever people help, please?

P-A-U-L

Canon EOS R6

01/18/2013 05:52:56 AM · #2

It is some kind of jQuery slider. You could achieve the same in Flash but obviously nobody likes Flash anymore as it doesn't work on iPad and iPhones.

Plenty of free examples of sliders on the web.

Panasonic LUMIX DMC-LX100

01/18/2013 06:04:25 AM · #3

Thank you, Paul, great start!

Now could you please elaborate a tad? I have NO idea about this stuff.

Is this something that a normal mortal can create and post on websites such as...... say...... Zenfolio, Facebook, Flickr, etc?

If so..... how?

spiritualspatula

Nikon AF-S NIKKOR 24-70mm f/2.8G ED

01/18/2013 07:17:05 AM · #4

Not related to the web aspect, but the photography itself... a lot of that "aging" is due to light position, at least on the Obama shot.

Tiny

Apple iPad mini 4

01/18/2013 07:18:59 AM · #5

www.//opiefoto.com/articles/photoslider#example

Is this of any use .

Skip

Canon EOS-1D X

Canon EF 300mm f/2.8L IS USM

01/18/2013 07:52:08 AM · #6

fixed your link ;-)

Originally posted by Tiny:

//opiefoto.com/articles/photoslider#example

Canon 12x IS USM (S3 IS built-in Lens) -- 36-432mm (35mm EQ)

01/18/2013 04:05:38 PM · #7

Originally posted by Tiny:

www.//opiefoto.com/articles/photoslider#example

Is this of any use .

No *sad face*.
That tutorial is about a totally different thing (a basic slideshow) rather than the example I linked to :-(

Nevermind..... I just had another look at Paul's "jQuery" and obviously this is quite beyond me. I'm sure it can't just be created and uploaded like a jpg, so I'll just forget about it.

Message edited by author 2013-01-18 16:16:11.

GeneralE

Canon PowerShot S3 IS

01/18/2013 05:06:41 PM · #8

Originally posted by Beetle:

I can think of a way to make an animated GIF which would transform (with a sliding transition) from one to the other, but I don't know how to make these with the controlable slider.

However, I have seen the same Before/After technique used on POTD pages from NASA's Earth Observatory (especially pages showing flooding) â�� maybe you can contact their webmaster and find out how it's done ...

Bear_Music

Samsung Galaxy S24 Ultra

Sony 24-70mm F4 Vario-Tessar T* FE OSS

01/18/2013 05:25:43 PM · #9

Here ya go: Seek and ye shall find...

//www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/

mikeee

Canon EOS-550D Rebel T2i

Canon 12x IS USM (S3 IS built-in Lens) -- 36-432mm (35mm EQ)

01/18/2013 05:30:14 PM · #10

If you right click on each of the Obama images they have different image titles (for Obama it's 9 and 11) so it appears to be 2 distinct images and the slider thingy is a function of the website. It's not a single image with a clever slider, it's 2 images with a clever slider masking one of them with the other.

I think you'd need to view your product in an internet browser rather than a photo viewer.

GeneralE

Canon PowerShot S3 IS

01/18/2013 06:01:25 PM · #11

See the previous link for instructions and to download the plugin -- it is basically a Java script which uses two images, and has to exist on a web page somewhere and viewed in a browser -- it is not a stand-alone image.

ETA: It occurs to me that you can view the source code of the example page and see exactly how it's done ...

I thought we now all had to turn off Java because of a newly-discovered security flaw ... :-(

Message edited by author 2013-01-18 18:02:35.