Jquery: Have it keep selecting the next image without me having to put ".next().next().next() etc.

Question

With my code I can get a div to scroll through 4 images, but if you look at the code, i have to keep adding '.next' to get it to scroll to another image. I don't want to determine the amount of images to scroll through in jquery, i want jquery to keep looking through the div for as many images as i have, scroll through all of them, then scroll back to the top. just take a look at my code. I don't want to use another plugin because i've almost accomplished what I want to do with just a few lines of code compared to multi KB plugins.

ps: I don't know why the '-165px' is necessary, but it makes it all align perfectly when scrolling from picture to picture.

Jquery:

Jquery:

$(document).ready(function(){
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: $('img').offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().offset().top - 165}, 2000).delay(1000)                   
        .animate({scrollTop: $("img").next().next().offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().next().next().offset().top - 165}, 2000).delay(1000)
    });
});

Any ideas?

Answer 1

code would help, but i would suggest using jquery to select the images... then iterate through them.

Answer 2

http://flesler.blogspot.com/2007/10/jqueryscrollto.html this plugin has promise.

Answer 3

I didn't test it, but this seems like it will work

$(document).ready(function(){
    var container = $('.rotate_container');
    var images = container.find('img');
    container.everyTime(10, function (){
        images.each(function() {
            container.animate({scrollTop: $(this).offset().top - 165}, 2000).delay(1000);
        });
    });
});

Answer 4

My solution requires you to put one additional div inside your container and one css rule. It goes like this:

<script type="text/javascript">
$(document).ready(function(){
    var top = 0;
    var up = true;
    var wrap = $(".rotate_container > div ") // shortcut :)

    function slide() {
        wrap.animate( { "top" : top+"px" }, 400 );

        if( Math.abs( top ) > wrap.height() ){ // if all inner_wrap is outside container
            up = false; 
        }
        else if( top >= 0 ) {
            up = true
        }
        if( up ) top -= 165;
        else top += 165;

        setTimeout( slide, 500 ) // call function slide after 500 ms
    }
    setTimeout( slide, 500 ) // call function slide after 500 ms
});
</script>

<style type="text/css">
.rotate_container {
    max-height:292px;
    max-width:760px;
    height:292px;
    width:760px;
    overflow:hidden;
    padding:0;
    margin:0;}

.rotate_container > div {
    position: relative;
    top: 0; left: 0;
}

.rotate_container img {
    height:292px;
    width:760px;}
</style>


<div class="rotate_container grid_12">
    <div id="inner_wrap">
        <img src="{{ MEDIA_URL }}/employlogo.png" class="top" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="middle" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="midbottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="bottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="verybottom" />
    </div>
</div>

Well, it's not pretty, but it works. I misunderstood your snippet at first, sorry.

Answer 5

Might check out jCarousel or it's little brother, jCarouselLite, which do image scrolling with ease effects.

For a solution to the above, you might assign the first img to variable and then increment it on the callback. In the following code the alert output is 'Second':

<div>First</div>
<div>Second</div>
<script type="text/javascript">
$(document).ready(function(){
    var test = $('div');
        test = test.next();
        alert(test.html());
});
</script>

So, to modify your code:

$(document).ready(function(){
    var img = $('.rotate_container img');
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
          .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
    });
});

etc.

Can probably modify that using a function to make it even cleaner as well.

Answer 6

Recursion. Write a function to do what you want (I would help with specific code but I don't know what you are going for). Have the function take in the first image. Do what you want in the function, and before you close the function call the function you are in and send it the .next() variable.