CODEWITHSUNDEEP
javascriptjquerycsshtml
cfircoo
cfircoo

Reputation: 439

jquery image gallery - first image no fade

I created a jquery image gallery. It work almost perfectly, all the images changing with fade out/in.

The issue is: after the last image the first image appear without fade effect.

HTML Code:

<div id="gallery-holder">
    <img src="images/main-galery1.jpg" class="active"  >
    <img src="images/main-galery2.jpg" >
    <img src="images/main-galery3.jpg" >

</div>

CSS code:

#gallery-holder{
  position:relative;
  top:0px;
  width:980px;
  height:300px;
  margin-left:auto;
  margin-right:auto; 
  overflow:hidden;
}

 #gallery-holder img{

   position:absolute;
   top:0;
   left:0;
   z-index:8;
}

#gallery-holder .active{
   z-index:10;
} 
#slideshow IMG.last-active {
   z-index:9;

}

Java Script

$(document).ready(function(){
 slideSwitch();
});



function slideSwitch() {
 var $active = $('#gallery-holder IMG.active');

 if ( $active.length == 0 ) $active = $('#gallery-holder IMG:last');

 var $next =  $active.next().length ? $active.next()
   : $('#gallery-holder 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()", 5000 );
});

any advice?

I tried to replace:

$active.removeClass('active last-active');

with this:

$('#gallery-holder IMG.active').removeClass('active last-active');

No luck

Upvotes: 0

Views: 406

Answers (1)

SeanCannon
SeanCannon

Reputation: 78006

Let's simplify things. No opacity/css, no active classes, just simple jQuery fades: 

(function slideSwitch() {
    var $gallery = $('#gallery-holder'),
        $active  = $gallery.find('img:visible'),
        $next    = $active.next().length ? $active.next() : $gallery.find('img').first();

    setTimeout(function() {
        $active.fadeOut('fast');
        $next.fadeIn('fast', slideSwitch);
    }, 2000);
}());

Demo: http://jsfiddle.net/AlienWebguy/npTD9/

Upvotes: 3

Related Questions