WordPress.org

Ready to get started?Download WordPress

Forums

Sponsors Carousel
Is it possible to implement pause on hover? (9 posts)

  1. deeve
    Member
    Posted 2 years ago #

    Hi Sergey,
    Great plugin! I've been trying to add a 'pause on hover' attribute to your sponsors-carousel.php script but for some reason the solution escapes me! Think it's a feature that could prove useful to other users..

    Any suggestions as to how I can achieve this?

    Thanks.

    http://wordpress.org/extend/plugins/sponsors-carousel/

  2. immanence
    Member
    Posted 2 years ago #

    I would need this too, if I can get the plugin to work at all.

  3. Florjohn
    Member
    Posted 1 year ago #

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

  4. jsannipoli
    Member
    Posted 1 year ago #

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

  5. kryvulena
    Member
    Posted 1 year ago #

    +1 from me!

  6. Web2Guru
    Member
    Posted 1 year ago #

    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();
    	}
    });
  7. Web2Guru
    Member
    Posted 1 year ago #

    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
  8. happyliu
    Member
    Posted 1 year ago #

    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?

  9. Web2Guru
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic