Title: Adding a toggled pause button
Last modified: August 20, 2016

---

# Adding a toggled pause button

 *  [westwindstudios](https://wordpress.org/support/users/westwindstudios/)
 * (@westwindstudios)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/)
 * Hello and thanks for a great plugin!
    I have been going through the examples 
   and cannot get a toggled pause/play button to work. My site is not public yet
   so I can’t show you, but can you offer any advice on where to put the extra code
   to enable these functions? thank you, west
 * [http://wordpress.org/extend/plugins/meteor-slides/](http://wordpress.org/extend/plugins/meteor-slides/)

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Plugin Author [Josh Leuze](https://wordpress.org/support/users/jleuze/)
 * (@jleuze)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434333)
 * 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](http://jquery.malsup.com/cycle/pause-callback.html)
 * Most likely you’d have to use a [custom slideshow template](http://jleuze.com/plugins/meteor-slides/customizing-the-slideshow-template/)
   to add the pause button, and a [custom slideshow script](http://jleuze.com/plugins/meteor-slides/customizing-the-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](http://jleuze.com/contact/)
   a link.
 *  Thread Starter [westwindstudios](https://wordpress.org/support/users/westwindstudios/)
 * (@westwindstudios)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434350)
 * 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](https://wordpress.org/support/users/jleuze/)
 * (@jleuze)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434366)
 * 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](http://jquery.malsup.com/cycle/more.html?v2.23)
 *  Thread Starter [westwindstudios](https://wordpress.org/support/users/westwindstudios/)
 * (@westwindstudios)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434368)
 * 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');
       		}
       	});
       ```
   
 *  [hafman](https://wordpress.org/support/users/hafman/)
 * (@hafman)
 * [12 years, 6 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434428)
 * 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.

 * ![](https://s.w.org/plugins/geopattern-icon/meteor-slides_0f131a.svg)
 * [Meteor Slides](https://wordpress.org/plugins/meteor-slides/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/meteor-slides/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/meteor-slides/)
 * [Active Topics](https://wordpress.org/support/plugin/meteor-slides/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/meteor-slides/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/meteor-slides/reviews/)

 * 5 replies
 * 3 participants
 * Last reply from: [hafman](https://wordpress.org/support/users/hafman/)
 * Last activity: [12 years, 6 months ago](https://wordpress.org/support/topic/adding-a-toggled-pause-button/#post-3434428)
 * Status: not resolved