Hello all, Not sure if this would be the correct forum for this, but check out the website below. I ma looking to overlay old and new photos with an interactive option. Would Responsive Content Slider we able to do this?

https://www.theguardian.com/artanddesign/ng-interactive/2015/jun/22/american-civil-war-photography-interactive

Hi Marc
One would be able to do something with old & new images, but not exactly like the example, (or at least not with the way RSC is, now), some outside code would be needed to get close to your example.

Would it perhaps be possible to use two containers on top of each other, one with the old, the other one with the new image, and then use the out-of-view state in connection with opacity change of the two images? Or maybe just the top image needs the opacity change? And in transitions set delay and duration? Just thinking...

Or if not the out-of-view, maybe some button to trigger the changes?

Can't do out of view etc in RCS at the moment (unless I have missed a couple of updates

You could also do it easier with the Orbit Slider thingy (foundation) because you can have multiple orbit slider thingies on a page without messing about with ID changing etc (as you would have to do with RCS.

I have a component for Orbit, which uses a FADE effect, that's pretty neat, and is almost a pure crossfade.

But even this way the visitor would have to manually change the image (unless someone knows some js magic, that could change the image on scrolling

I was thinking of trying the out-of-focus thing in SD3. Sorry, I should have mentioned that.

Don't know, but I have a 'before/after building block in my sharing repository. Just for RSD at the moment, but it will work in SD3 too. It's not the same as on that web page, but...

You might find this helpful??? I have no idea if it meets your needs or not, but it looks like it might.
http://www.dynamicdrive.com/dynamicindex4/beforeandafter.htm

Good luck.
MJ

Mark, I have used the one you mention in 'the old days', before the world got responsive. I've also tried to responsify it, but that didn't go very well.

I haven't found a way of doing it with Responsive Content Slider.

In SD V3 it seems possible.
1. I put a coloured picture on the page, and do the following in the Styles tab for it.
2. I push it out of view by content above it (or perhaps a top margin of, say, 110vh).
3. In the 'Out of View' state I go to Effects > Filters & Blend Modes and set Grayscale to 1.
4. Still in Effects I go to Transitions and set a Duration (say 1 second) and Delay (say 3 seconds).

The effect won't be seen in Preview, but will be seen in 'Preview on ...'. I don't seem to be able to test it in IE since the latest big Windows update, but I doubt it would work in that. It works in Edge.

Frank

Frank, I'm not able to make it work. I followed your steps exactly.