How to apply a script to a group of elements individually?

[Dustin Hensley]

I'm using the jQuery Cycle plugin to create a 4x3 grid of slideshows. I've been using the document.ready script to run the slideshow, but that makes the plugin run once and apply to every element (divs that only show one image at a time). I'm using a randomnumber function to make each load of the slideshow use a different interval.

    <script type="text/javascript">
        $(document).ready(function() {
            var randomnumber=Math.floor(Math.random()*10)
 
            $('.slideshow').cycle({
                fx: 'curtainX,curtainY', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                random: true, // true for random, false for sequence (not applicable to shuffle fx)
            });
        });
    </script>
 

I'm looking into the Cycle plugin now to try to find out how use the interval created by randomnumber, but the real issue is that I don't know how to alter the code so that it loads for each individual slideshow. If each one of them had their own speed, then the entire "wall" would look like it was constantly changing or updating.

Any help here is appreciated. I just don't know enough about Javascript to even know where to start. I'm picking this up by ripping apart other people's codes and trying to piece things together.

Each of my slideshows use a simple div.. img /.. /div style.

<div class="slideshow">
    <img src="path/to/img.jpg" alt="" />
    <img src="path/to/img.jpg" alt="" />
    <img src="path/to/img.jpg" alt="" />
</div>
 

The Cycle plugin works just fine. I'm linking the jQuery library and the Cycle plugin to the page, but that has nothing to do with my question. (I just wanted to make sure that was clear.)

Finally, the bottom line:
How can I modify my current code to use the Cycle plugin for each instance of a slideshow to create a wall of movement?

[acoder]

The problem is that you're selecting all slideshows on this line: $('.slideshow').cycle({. To select each individual slideshow div, you can give each an ID, e.g. <div class="slideshow" id="ss1"> and then access as $('#ss1').cycle({ or you could give each another class to differentiate.