JQuery image effect...

I remember reading a blog a while back that showed how to use Jquery to lay one picture on top of the other and use a slider in the middle to reveal either more or less of the back image, they used an example of a photo of an old woman and her in her younger days and you could use the slider to reveal as much or as little of each image as you wanted.

I can not remember what they called this slider though, can anyone else remember prehaps?

Thanks.

 

It would be some variation of a carousel. z-index, fade carousel with slider?

Sounds cool! Good luck finding it.

 

It was popular a couple of months back on the blogs, 2 images and a little slider in the middle you could move left and right.

 

hmm... not sure of the one youre talking about... but you could just use the jquery ui slidebar to modify the opacity value of one image overlayed on top of another using z-index...

http://jqueryui.com/demos/slider/#slider-vertical

code something like this:

	
<img src="image1.jpg" style="postion:absolute; z-index:1;" id="bottom-image"/>
<img src="image2.jpg" style="postion:absolute; z-index:2;" id="top-image"/>
 
<script type="text/javascript">
$(function() {
		$("#slider-vertical").slider({
			orientation: "vertical",
			range: "min",
			min: 0,
			max: 100,
			value: 60,
			slide: function(event, ui) {
				$("#top-image").opacity(ui.value);
			}
		});
	});
	</script>

PHP: