WordPress.org

Support

Support » Plugins and Hacks » [Plugin: Sponsors Carousel] Is it possible to implement pause on hover?

[Plugin: Sponsors Carousel] Is it possible to implement pause on hover?

Viewing 8 replies - 1 through 8 (of 8 total)
  • I would need this too, if I can get the plugin to work at all.

    Florjohn

    @florjohn

    would like this too but just as a bonus already working great 🙂 thx!

    Anybody know how to do this? Would like to pause on hover as well.

    +1 from me!

    I would like this too.

    It’s not a perfect solution, but I found a solution in the jQuery forums (originally posted in google groups). When you hover over an image, it finishes scrolling the last image out and stops scrolling. It starts scrolling again when you stop hovering over the image, so moving the cursor from one image to another will cause it to scroll one more image.

    Add the following to the settings in the sponsors-carousel.php, in the Initialize script, after the ‘auto’ setting, near line 160:

    ,initCallback: function(jc, state) {
    	if (state == 'init') {
    		jc.startAutoOrig = jc.startAuto;
    		jc.startAuto = function() {
    			if (!jc.paused) {
    				jc.startAutoOrig();
    			}
    		}
    		jc.pause = function() {
    			jc.paused = true;
    			jc.stopAuto();
    		};
    		jc.play = function() {
    			jc.paused = false;
    			jc.startAuto();
    		};
    		$('li.jcarousel-item').mouseover(function() {
    			jc.pause();
    		});
    		$('li.jcarousel-item').mouseout(function() {
    			jc.play();
    		});
    	};
    	jc.play();
    }

    This is how my script looks:

    $output .= "jQuery('#mycarousel".$randomid."').jcarousel({
    	scroll: ".stripslashes(get_option('scwp_scroll_amount'))."
    	,animation: ".$speed."
    	,wrap: 'circular'
    	,auto: " . $auto . "
    	,initCallback: function(jc, state) {
    		if (state == 'init') {
    			jc.startAutoOrig = jc.startAuto;
    			jc.startAuto = function() {
    				if (!jc.paused) {
    					jc.startAutoOrig();
    				}
    			}
    			jc.pause = function() {
    				jc.paused = true;
    				jc.stopAuto();
    			};
    			jc.play = function() {
    				jc.paused = false;
    				jc.startAuto();
    			};
    			$('li.jcarousel-item').mouseover(function() {
    				jc.pause();
    			});
    			$('li.jcarousel-item').mouseout(function() {
    				jc.play();
    			});
    		};
    		jc.play();
    	}
    });

    The original changes included comments about the authors, and comments are removed by this forum’s software, so here they are for full disclosure:

    Pause carousel scrolling when a user mouses overs an item and restart the scrolling when they mouse out.
    Written by cormac at finisco dot com 19/2/2009 based on work by Jeremy Mikola:
    http://groups.google.com/group/jquery-en/browse_thread/thread/f550b94914d10065

    Thanks for the code. It doesn’t seem to work completely for me. It takes a while to pause and then it doesn’t restart unless I click on the arrows or wait a while longer. Any ideas how to fix that?

    It’s not a perfect solution, I have a similar issue.

    The jquery carousel scrolls by one logo at a time (or more depending on your “Scroll Amount” setting), and this does not interrupt that scrolling process, it simply pauses the script so the next scrolling process is not started. So after hovering over an image, the current scrolling process continues to scroll the logo at the far left out and the next logo is flush to the left side.

    It also appears that mousing over an image and then back out really quick can cause the scrolling to stop until you scroll back over another logo. My guess is that the script is ready to be paused, but once you hover over an image and it receives the pause command, while it is still handling the last scroll process, it is not ready to un-pause so it does not catch the mouse leaving the image. If the mouse moves back over an image and back off, it starts up again (at least for me it does).

    Also note my settings: I have slowed the scroll speed to 2000, have set the scroll amount to 1, and set auto-scroll to continuous. A faster scroll speed will lower the time it takes to pause, a higher scroll amount will cause more logos to be scrolled out before it pauses, and I’m not sure how the other auto-scroll settings will affect it.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Plugin: Sponsors Carousel] Is it possible to implement pause on hover?’ is closed to new replies.