I have the following code that allows a thumbnails src attr to replace the image in a main image window.
$(document).ready(function(){
var originalimg = $('#imageMain img').attr('src');
$(".subImage").hover(function(){
var currentimg = $(this).attr('src');
$('.mainImage').fadeOut(function () {
$('.mainImage').attr('src', currentimg).fadeIn();
});
},function(){
$('.mainImage').fadeOut(function() {
$('.mainImage').attr('src', originalimg).fadeIn();
})
});
});
Currently the behaviour does the following: 1. hover over - main image fades to white, then fades into the sub image. 2. mouse out - main image fades to white, then is replaced with the original.
What I really need instead of the 'white' transition in between the 2 image states, I want them to sort of overlap (so one fades out as the other fades in) -
is this possible?
thanks
You can not roatate the image sequentially with fadeout/fadein.You have to make the transition in a alternative way.I have wrote the whole code for you:
<head>
<title>jQuery Image Rotator</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$("#photoshow").hover(function() {
setInterval("rotateImages()", 2000); // set the interval time as your wish
});
function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');
oCurPhoto.removeClass('current').addClass('previous');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>
<style type="text/css">
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<div id="photoShow">
<div class="current">
<img src="images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="images/Leaf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="images/Spring.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="images/Water.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>
</body>
</html>
It will make a transition of image one by one.Replace with proper class, id name and image url.Hope it helps !
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.