Jquery cycle plugin - Multiple divs with cycle plugin from one script?

Question

Im new to jquery/javascript and need help!

I want to use the cycle plugin in multiple divs with different images in each div. Each div is the same size and each image is the same size.

The code I have used so far shows all images in the first div but when I click on my logo (which is linked to index.html) all the images suddenly appear in place and working with the cycle plugin.

This is what I have in the head

<script type="text/javascript" src="js/jquery-1.3.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#box1').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box1', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box2').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box2', 
                       pause:   1  
                });
            });

            $(document).ready(function(){
                $('#box3').cycle({ 
                        fx:     'fade', 
                       speed:   300, 
                       timeout: 0, 
                       next:   '#box3', 
                       pause:   1  
                });
            });
        </script>

body...

<div id="container">


            <div id="box1" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>


            <div id="box2" class="box">
            <img src="images/bottle.jpg" alt="images/bottle.jpg"/>
            <img src="images/pattern.jpg" alt="images/pattern.jpg"/>
            </div>

            <div id="box3" class="box">
            <img src="images/car.jpg" alt="images/car.jpg"/>
            <img src="images/van.jpg" alt="images/van.jpg"/>
            </div>
    </div>

In the css the container is position: absolute;

I'm sure there is a simple solution but I have searched stackoverflow and other sites to no avail. Any help is greatly appreciated!!!!

One comment: You should include all your $('#box').cycle() within one $(document).ready(). What is the expected behaviour? — VKen
Hi Luiggi. The expected behaviour is that each individual div will have it's own individual cycle of images. As it currently stands all of my images appear in the first div until I click on my logo, which is linked to index.html, in which case all of the images appear in their correct divs and run the cycle plugin fine. Hope that makes sense. — Francis

zb' zb' · Accepted Answer · 2012-10-21T23:54:02

I made this example:

http://jsfiddle.net/oceog/YHLz2/11/

$(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});

it works as expected, yours too. May be you use too old jquery ? (current is 1.8)

if answer not fit your problem, can you please edit jsfiddle to show where the problem ?

when I load the page
when I click on my logo, linked to index.html

I think when you load the page you load not index.html, but index.htm, or index.php or something else, check your site directory

The jsfiddle should repeat your problem, not just show your structure

if your site on the internet - give me link and i will check

   $(document).load(function() {
    $('.box').each(function() {
        var $this = $(this);
        $this.cycle({
            fx: 'fade',
            speed: 300,
            timeout: 0,
            next: $this,
            pause: 1
        });
    });
});

Jquery cycle plugin - Multiple divs with cycle plugin from one script?

1 Answers