Hi all, I'm writing my first real bit of jQuery, so bear with me here...
What I'm doing is this:
- Creating 12 instances of the Cycle plugin (the feature is a grid of product images)
- Within a repeating interval: pausing all instances of cycle, choosing 2 at random, and resuming those. So at any one time, there's only 2 active instances of cycle going.
- On click of the current image (in any of the 12 cycle instances), pause all cycle instances and create a lightbox that shows detailed information about the image that was clicked.
- On close of lightbox, resume step #2.
My problem is in step #3. When I click on the image, all cycle instances pause EXCEPT for the one that contains the image I clicked on.
// Set interval to choose 2 random instances of the 12
var getTime = function() {
$(self.gridId + ' ul li').cycle('pause');
for(i=0; i <2; i++) {
var randNum = Math.floor(Math.random() * self.numTiles);
$(self.gridId + ' ul li:eq(' + randNum + ')')
.cycle('resume');
}
};
var setFreq = setInterval(getTime, 1500);
// Add event handler to image and pause all cycles
$(self.gridId + ' ul li img').click(function() {
clearInterval(setFreq);
$(self.gridId + ' ul li').cycle('pause');
self.showDetails(this);
});
For whatever reason, the cycle instance associated with the clicked image just keeps going. I tried doing $(this).parent().cycle('pause') also to no avail.
I don't know if the problem is in the way I've structured the JS or not... like I said, this is the first bit of complicated jQuery I've had to write, so maybe I made a coding faux pax somewhere. Help please?
Here's a link to the actual thing I'm working on: http://apivadeearts.com/testing/product_grid.html
(I also know I shouldn't be attaching an event handler to ALL the images... should be only the currently active image. I'll get around to that after I figure this one out.)