Hi, I have a slideshow set up on my site which allows users to click back and forward to view images - the transition is an animated slide to the next image. But I now want to set up an automatic fade, which fades in the next image on a timer. I'm not entirely sure how to set this up and how to integrate this with my current script without conflicting with it.
Here is what I have so far for the onclick slide animation. If anyone can help with some advice to get me started with the auto fading that would be great!
// project animations
$("#featured").hover(function(){
$(this).find(".bottom-slide").animate({bottom:"0"},{queue:false,duration:350});
$(this).find(".arrow-left").animate({left:"0"},{queue:false,duration:350});
$(this).find(".arrow-right").animate({right:"0"},{queue:false,duration:350});
}, function(){
$(this).find(".bottom-slide").animate({bottom:"-66px"},{queue:false,duration:350});
$(this).find(".arrow-left").animate({left:"-50px"},{queue:false,duration:350});
$(this).find(".arrow-right").animate({right:"-50px"},{queue:false,duration:350});
});
// project arrows
var currentFeatureSlide = 1;
var currentFeatureLocation = 0;
$("a.arrow-left").fadeTo(0,0.2);
var totalFeatureSlides = Math.ceil( ($(".featured-entry > div").size()) );
$("a.arrow-right").click(function(event){
if (currentFeatureSlide != totalFeatureSlides) {
if (currentFeatureSlide == 1) { $("a.arrow-left").fadeTo(300,0.75); }
newFeatureLocation = (currentFeatureLocation + 512);
$(".featured-entry").animate({left:"-"+newFeatureLocation},{queue:false,duration:450});
currentFeatureSlide++;
if (currentFeatureSlide == totalFeatureSlides) {
$("a.arrow-right").fadeTo(300,0.2); }
currentFeatureLocation = newFeatureLocation;
}
});
$("a.arrow-left").click(function(event){
if (currentFeatureSlide != 1) {
if (currentFeatureSlide == totalFeatureSlides) {
$("a.arrow-right").fadeTo(300,0.75); }
newFeatureLocation = (currentFeatureLocation - 512);
if (currentFeatureSlide > 2) {
newFeatureLocationNum = "-"+newFeatureLocation; } else {
newFeatureLocationNum = newFeatureLocation; }
$(".featured-entry").animate({left:newFeatureLocationNum},{queue:false,duration:450});
currentFeatureSlide--;
if (currentFeatureSlide == 1) {
$("a.arrow-left").fadeTo(300,0.2); }
currentFeatureLocation = newFeatureLocation;
}
});
