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!!!!

Answer 1

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

---

Try to change your code to the following:

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