CODEWITHSUNDEEP
javascriptjqueryhtmlcssslideshow
Dan Ovidiu Boncut
Dan Ovidiu Boncut

Reputation: 3165

Why slideshow code isn't correct?

I want to make a slideshow, with a code that i've used hundred times before, but for some reason it doesn't work now. I cant't figure out what i'm doing wrong. HTML

<div id="project1" class="project curent">
 <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/004/cache/african-lion-male_436_600x450.jpg" class="active" />
 <img src="http://www.howdoeslooklike.com/wp-content/uploads/2012/10/Lion-013-2048x2048.jpg" />
 <img src="http://us.123rf.com/400wm/400/400/aleksm/aleksm1209/aleksm120900002/15398724-winged-lion-front-view-drawing.jpg" />
</div>

CSS

.project{position:absolute; top:0; left:0; width:100%;}
.project img{position:absolute; top:0; left:0;  width:200px; height:auto;z-index:8;}
.project img.active{z-index:10;}
.project img.last-active{z-index:9;}

JQuery

function slideSwitch() {
    var $active = $(".project img.active");
    $active.hide();
    if ( $active.length == 0 ) $active = $('.project IMG:last');

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

And here is a work in progress example. Any ideeas? :|

Upvotes: 0

Views: 780

Answers (1)

Mooseman
Mooseman

Reputation: 18891

slideSwitch() was not called correctly in the setInterval. This was shown in the console. Also note that your slideshow code does not work correctly, so I added a .show() to make the .last-active image appear again.

jQuery:

function slideswitch() {
    var $active = $("#project1 img.active");
    $active.hide();
    if ( $active.length == 0 ) $active = $('#project1 IMG:last');

    var $next =  $active.next().length ? $active.next()
        : $('#project1 IMG:first');

    $active.addClass('last-active').show();

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
};
$(document).ready(function() {
    setInterval(slideswitch, 1000 );
});

Fiddle: http://jsfiddle.net/sdGhT/8/

Upvotes: 3

Related Questions