I want my website visitors to be able to use a jQuery slider to 'drag' their way through a sequence of images. Only one image is shown at a time, and when the user drags the slider handle left and right, the shown image changes to the next/previous in the sequence. Additionally, and this is the tricky part, I want the new image to fade in on top of the previous image.
I have the slider code working, using the jQuery slider:
$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 10,
value: 1,
slide: function( event, ui ) {
// CODE THAT MAKES THE NEW IMAGE FADE IN
}
});
Currently, my plan is to actually have all images in the HTML in separate DIVs that overlay each other and with opacity 0. Dragging the handle would put the relevant div on top and fade it in.
Any ideas how to do this?
I would do something like this (link to JSFiddle)
html
<div id="gallery">
<img src="http://i.imgur.com/SfzW1.jpg" class="abs pic1" />
<img src="http://i.imgur.com/hsVyi.jpg" class="abs pic2" />
<img src="http://i.imgur.com/RJVm9.jpg" class="abs pic3" />
<img src="http://i.imgur.com/dw00y.jpg" class="abs pic4" />
</div>
and the css
#gallery{
position: relative;
}
img {
display:none;
width: 200px;
height: 100px;
z-index:0;
}
.pic1{
display:inline;
}
.abs{
position: absolute;
top:0;
left:0;
}
javaScript/jquery
$( "#mySlider" ).slider({
range: "max",
min: 1,
max: 4,
value: 1,
slide: function( event, ui ) {
var pic_num = ui.value;
var new_image_elm = $("#gallery img.pic"+pic_num);
var old_image_elm = $("#gallery img:visible");
if(new_image_elm != null){
var zIndex = parseInt(old_image_elm.css('z-index'));
new_image_elm.css('z-index', zIndex+1);
new_image_elm.fadeIn( "slow", function() {
// Animation complete
old_image_elm.hide();
});
}
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments