Failed to start jQuery slideshow fadein fadeout
I have some problems with my jquery slidshow @ http://www.willruppelglass.com/ (at the bottom)
As you can see the images are fadein and fadeout and this is working correctly and the images are coming from the server and I am setting the height to 200 for each image. The problem I am facing is that the images, after fading out, are still displayed and I can see them. What I am trying to do is when the image disappears, does not display it, but when it disappears, display it. Is it possible?
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 6500 );
});
#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
<div id="slideshow">
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image2'] ?>" height="200" />
<img src="upload/<?php echo $array['image3'] ?>" height="200" />
</div>
Any help would be appreciated.
source to share
You must add animation code to loosen the active image so the transition is smoother. If you run all animations at the same time, you will need to adjust the timings to keep it smooth; I'm not sure why this is, but why I changed the duration to 2000 milliseconds.
I have checked the code below and it seems to work so smoothly. However, I want to advise you to refactor your code so that you only have 1 animation function left. You should also resize the images you use for the slideshow (5 megabytes for the SERIOUS overkill image).
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next(): $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});
$active.animate({opacity: 0}, 2000);
}
If you really want to hide the image after the show animation finishes, you can use the code below, but it really doesn't look very smooth to me, your choice of course.
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next(): $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
$active.css({opacity: 0.0});
});
}
source to share
Helmus is right, your images are too big - the first time someone visits the site, it disappears after 2 or more times before the image is even loaded. For images of this size, 30kb is large, not to mention 5megs. You might want to preload images - this one is pretty easy to use - https://github.com/desandro/imagesloaded .
Not sure how you want them to be aligned, but you can use jquery to do this if css cannot do it.
source to share