accessing multiple instances in jquery

Question

so i have a page of products, and for each one i want to cycle through some images on mouseover, and have it stop on mouseout. the following code is my current state...

initially i had it working where it checked a global variable called repeatCycle to see if it should rotate to the next image. this caused problems because all the instances of this function were checking & setting the same variable. i would often get multiple instances running at once. so i want to set something for each instance instead, but was not able to do it.

i also tried passing it in as an argument to the function, but on the mouseout event when i passed in repeatCycle: false, it would just initialize another instance.

anyone have any suggestions as to how to accomplish this?

$.fn.image_cycler = function(options){
  // default configuration properties
  var defaults = {
    fade_delay:     150,
    image_duration: 1500,
  };
  var options = $.extend(defaults, options);

  this.each(function(){
    var product     = $(this);
    var image       = $('div.image>a.product_link>img', product);
    var description = $('div.image>div.description', product);
    var all_images  = $('div.all_images', product);
    var next_image  = ($(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img').attr('src')) ? $(all_images).find('img[src="' + $(image).attr('src') + '"]').next('img') : $(all_images).children('img').first();;

    // mouseover
    image.fadeOut(options.fade_delay, function(){
      image.attr('src', next_image.attr('src'));
      image.fadeIn(options.fade_delay);
    });
    if (this.repeatCycle){
      var loop = function() {
        return this.image_cycler(options);
      }
      setTimeout(loop,options.image_duration);
    }
  });
};

$(document).ready(function() {
  $('div.product').hover(function(){
    $(this).image_cycler();
  }, function(){
    $(this).image_cycler.repeatCycle = false;
  });
});

have you tried the .data function to store data on each element? — Marco
– Marco, Commented Feb 3, 2011 at 23:16
no i am not familiar with it. im looking through the documentation on it, but it's not clear to me how to store different data for each instance, nor how to access it. let me experiment with this... its nice just to have another route to take! — brewster
– brewster, Commented Feb 3, 2011 at 23:24
.data is the first, easiest thing that comes to my mind as well. — morgancodes
– morgancodes, Commented Feb 3, 2011 at 23:24

user229044 · Accepted Answer · 2012-07-31 16:12:32Z

1

Try using jQuery's .data(). e.g. something like replacing the lines:

if (this.repeatCycle){ 
....
$(this).image_cycler.repeatCycle = false;

by:

if (product.data('repeatCycle')){
....
$(this).data('repeatCycle', false);

edited Jul 31, 2012 at 16:12

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Feb 3, 2011 at 23:44

Neil

3,2111 gold badge19 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

accessing multiple instances in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related