Note that there are some explanatory texts on larger screens.

plurals
  1. POaccessing multiple instances in jquery
    primarykey
    data
    text
    <p>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...</p> <p>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 &amp; 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.</p> <p>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.</p> <p>anyone have any suggestions as to how to accomplish this?</p> <pre><code>$.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&gt;a.product_link&gt;img', product); var description = $('div.image&gt;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; }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload