views:

101

answers:

0

Hi all, I'm writing my first real bit of jQuery, so bear with me here...

What I'm doing is this:

  1. Creating 12 instances of the Cycle plugin (the feature is a grid of product images)
  2. 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.
  3. 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.
  4. 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.)