CODEWITHSUNDEEP
javascriptjqueryhtmlslideshowcycle
memento
memento

Reputation: 97

cycling images with jquery

I have a simple HTML list:

<ul>
    <li>
        <div class="slideshow1">
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide1" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>

    <li>
        <div class="slideshow2">
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
            <img class="bradius5 slide2" src="<?php base_url();?> img/ristorante1.jpg" height="150" width="170"/>
        </div>
    </li>
</ul>

I tried to cycle through the images by doing this:

$('.slide1,.slide2').hide();

$.each($('.slide1'), function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

$.each($('.slide2'),function() {
    $(this).fadeIn().delay(1900).fadeOut();
});

However, it doesn't cycle image by image; it cycles multiple images at a time.

I want to cycle through all the images in the first li, then cycle through the images in the second li.

Upvotes: 0

Views: 3677

Answers (2)

locrizak
locrizak

Reputation: 12281

its because youre delaying all of them at once. The first parameter in the each is the current index.

Try something like this:

$.each($('.slide1'),function(i){
     $(this).fadeIn().delay(i*200).fadeOut();
});

this will delay each one 200ms from the last

Update

You should really use a plugin like @ShankarSangoli has suggested and just get it to work with the layout but something like this should work for you as well. (this hasn't been tested but just to get you started)

var _slide1 = $('.slide1');
var _slide2 = $('.slide2');
var_count1 = 0;
var _count2 = 0;

setInterval(function(){
    _slide1[_count1].fadeOut(300);
    _slide2[_count2].fadeOut(300);

    _count1 = _count1 >= _slide1.length ? 0 : _count1+=1;
    _count2 = _count2 >= _slide2.length ? 0 : _count2+=1;

    _slide1[_count1].fadeIn(300);
    _slide2[_count2].fadeIn(300);
}, 2000);

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

Why don't you use jquery cycle plugin? It offers a lot of features and very easy to use

http://jquery.malsup.com/cycle/

Upvotes: 1

Related Questions