WordPress.org

Support

Support » Plugins and Hacks » Adding a toggled pause button

Adding a toggled pause button

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Josh Leuze
    Participant

    @jleuze

    Hi, you want a pause button that switches to a play button when it is paused, is that right? Did you look at this example in the jQuery Cycle documentation? http://jquery.malsup.com/cycle/pause-callback.html

    Most likely you’d have to use a custom slideshow template to add the pause button, and a custom slideshow script to add functionality for that.

    Are you developing the site locally or do you have it on a live server somewhere? If it’s online I can take a look if you want to send me a link.

    westwindstudios
    Member

    @westwindstudios

    Thank you for your time,
    The site is not live yet so I realize it’s difficult for you to speak to this.
    Yes, I would like a pause button that switched to a play button when paused.
    I have looked at the pause-callback and other examples. I tried a number of ways to incorporate the script into a custom slideshow script to no avail. Also putting the button markup in a custom template. This would make sure the button is in the right div I presume.

    If I were to add the code from the example to the custom script where would it go? And I would like to not use the callback,

    Sorry if this is too vague but I appreciate any help you can offer.
    thank you,
    west

    Plugin Author Josh Leuze
    Participant

    @jleuze

    Sorry, I haven’t tried this myself yet so I can’t give you a real clear picture, but this code from the example would have to go before the cycle function:

    var toggle = jQuery('#toggle').click(function() {
    		var paused = slideshow.is(':paused');
    		slideshow.cycle(paused ? 'resume' : 'pause', true);
    	});

    And these would have to be added to the cycle function:

    pause: true,
    		paused: function(cont, opts, byHover) {
    			!byHover && toggle.html('Resume');
    			jQuery('#status').html('paused');
    		},
    		resumed: function(cont, opts, byHover) {
    			!byHover && toggle.html('Pause');
    			jQuery('#status').html('running');
    		}

    There are a couple of other examples with pause buttons, you could try some of those, they might be a better intro trying this: http://jquery.malsup.com/cycle/more.html?v2.23

    westwindstudios
    Member

    @westwindstudios

    Thanks for this, I believe I put it in the right place in the slideshow.js. I now get an error – slideshow is not defined.

    There was already a pause: 1 which I removed, same results with it too.
    I feel like there is one little thing I have wrong, but my knowledge of js is limited. (I’m working on increasing it)
    Thanks again for any ideas,

    Here is the bit from the top of the slideshow.js I have modified:

    var $j = jQuery.noConflict();
    
    $j(document).ready(function() {
    
    	// Get the slideshow options
    	var $slidespeed      = parseInt( meteorslidessettings.meteorslideshowspeed );
    	var $slidetimeout    = parseInt( meteorslidessettings.meteorslideshowduration );
    	var $slideheight     = parseInt( meteorslidessettings.meteorslideshowheight );
    	var $slidewidth      = parseInt( meteorslidessettings.meteorslideshowwidth );
    	var $slidetransition = meteorslidessettings.meteorslideshowtransition;
    	var toggle = jQuery('#toggle').click(function() {
    		var paused = slideshow.is(':paused');
    		slideshow.cycle(paused ? 'resume' : 'pause', true);
    	});
    	// Setup jQuery Cycle
        $j('.meteor-slides').cycle({
    		cleartypeNoBg: true,
    		fit:           1,
    		fx:            $slidetransition,
    		height:        $slideheight,
    		next:          '#meteor-next',
    		pager:         '#meteor-buttons',
    		pagerEvent:    'click',
    		prev:          '#meteor-prev',
    		slideExpr:     '.mslide',
    		speed:         $slidespeed,
    		timeout:       $slidetimeout,
    		width:         $slidewidth,
    		pause: true,
    		paused: function(cont, opts, byHover) {
    			!byHover && toggle.html('Resume');
    			jQuery('#status').html('paused');
    		},
    		resumed: function(cont, opts, byHover) {
    			!byHover && toggle.html('Pause');
    			jQuery('#status').html('running');
    		}
    	});

    If anyone’s following this thread, you need to define your instance of jQuery cycle as ‘slideshow’ using a variable at this point…

    // Setup jQuery Cycle
        var slideshow = $j('.meteor-slides').cycle

    that got it going for me

    and don’t forget to switch this jQuery('#toggle') for this $j('#toggle')

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Adding a toggled pause button’ is closed to new replies.