WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
Adding a toggled pause button (6 posts)

  1. westwindstudios
    Member
    Posted 1 year ago #

    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/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. westwindstudios
    Member
    Posted 1 year ago #

    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

  4. Josh Leuze
    Member
    Plugin Author

    Posted 1 year ago #

    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

  5. westwindstudios
    Member
    Posted 1 year ago #

    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');
    		}
    	});
  6. hafman
    Member
    Posted 4 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic