CODEWITHSUNDEEP
javascriptjqueryhtmlcss
conor.ob
conor.ob

Reputation: 97

Why are these images not cycling through while using JQuery?

I am trying to cycle through 3 images, stacked on top of one another. The jQuery I am using does not have any effect on the images and I cannot see what the problem is. I'd really love some help! Cheers!!

HTML:

        <div id="cycler">
        <img class="active" src="images/dubcity4.jpg" alt="my image"/>
        <img src="images/dubcity2.jpg" alt="my image"/>
        <img src="images/dubcity3.jpg" alt="my image"/>
        </div>

CSS:

      #cycler{position:relative;}
      #cycler img{position:absolute;z-index:1}
      #cycler img.active{z-index:3}

JavaScript:

function cycleImages(){
    var $active = $('#cycler.active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
    $next.css('z-index', 2);
    $active.fadeOut(1500, function(){
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
}
$(document).ready(function(){
    setInterval('cycleImages()',2000);
})

Upvotes: 0

Views: 127

Answers (5)

Noble Mushtak
Noble Mushtak

Reputation: 1784

As everyone here has said, you need a space between your CSS selectors to denote that you want descendants. Also, you need to use :first-child, not :first.

Also, you can not pass a string into setTimeout(). Furthermore, setTimeout() expects an actual callback function in its first argument, not what that function returns. What you're doing is very similar to this:

function looper() {
    $(this).hide();
}
$("img").each("looper()");

That doesn't make any sense, does it?

Now, the fixed code:

function cycleImages(){
    var $active = $('#cycler .active');
    var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first-child');
    $next.css('z-index', 2);
    $active.fadeOut(1500, function(){
        $active.css('z-index',1).show().removeClass('active');
        $next.css('z-index',3).addClass('active');
    });
}
$(document).ready(function(){
    setInterval(cycleImages,2000);
})

Here's the fiddle: http://jsfiddle.net/NobleMushtak/L4D7r/

Upvotes: 0

gregjer
gregjer

Reputation: 2843

Change this:

var $active = $('#cycler.active');

to that:

var $active = $('#cycler .active');

in your code you are trying to find element with id="cycler" AND class="active" which is wrong

Also try to pass function to a setInterval instead of a string

setInterval(cycleImages,2000);

See jSfiddle http://jsfiddle.net/ygV3z/

Upvotes: 2

Uche
Uche

Reputation: 105

JQuery has an each method that could help you cycle through DOM elements:

$("#cycler img").each(function(key, obj) {
   // fetch the arguments passed
   var args = arguments;
   // get a jquery accessible form of each object
   var obj = $(obj);
   // do stuff
});

You can match on names or classes, or even the attributes if they are the same. I'm sure better skilled folks could tell you if 1 is faster than the other, but the notation for attributes would be $("#cycler [data-pick='true']") to match each image within #cycler that is defined as follows: <img src="..." data-pick="true" />.

Hope this helps.

Upvotes: 0

Valentin Mercier
Valentin Mercier

Reputation: 5326

You have made a typo in your CSS selector. Just fix it by changing this:

var $active = $('#cycler.active');

into the following:

var $active = $('#cycler .active');

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68400

For sure this is wrong: $('#cycler.active');

You should have $('#cycler .active'); since .active is descendant of #cycler. Your selector is looking for a element with id = cycler that also have active class assigned.

Upvotes: 0

Related Questions