Adding a toggled pause button

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? https://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.

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

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: https://jquery.malsup.com/cycle/more.html?v2.23

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')