Play/Pause button code for Wordpress

kirk's Avatar

kirk

09 Sep, 2013 07:42 PM

Is there an example of how to add the play/pause button in Wordpress? ... especially need help trying to add the Play/Pause button inside the slideshow area rather than above/below so that it also shows up in fullscreen mode ... if possible.

  1. Support Staff 1 Posted by Dmitry Semenov on 09 Sep, 2013 09:39 PM

    Dmitry Semenov's Avatar

    Hello,

    In WordPress version JS init code of slider always runs in footer. http://help.dimsemenov.com/kb/royalslider-javascript-api/creating-p...

    If you wish the button to be in slider wrapper, you'll need to append it via jQuery inside .royalSlider container after the slider is initialized.

    Basically, here is JS code that will append button after each slider on page (it assumes that autoPlay is on, to turn it off call - slider.royalSlider('stopAutoPlay')):

    
        $('.royalSlider').each(function() {
    
          var autoStart = true;
          var slider = $(this);
          var button = $('<button>pause</button>').insertAfter(slider).click(function() {
    
            if(autoStart) {
                $(this).html('play');
            } else {
                $(this).html('pause');
            }
            autoStart = !autoStart;
    
            slider.royalSlider('toggleAutoPlay');
          });
    
        });
    

    http://help.dimsemenov.com/kb/wordpress-royalslider-advanced/wp-whe...

    Dmitry

  2. 2 Posted by theMikeD on 17 Dec, 2013 11:39 PM

    theMikeD's Avatar

    I'd like to do this as well. Is there a working example I can look at? In order to force the custom JS after the RS init, the RS init code has to have a registered name to add as a prerequisite in the custom JS code enqueue. In the following line, "jquery" is the prerequisite, and so WP ensures that this code will appear after the call to jquery does.

    wp_enqueue_script( 'jquery.custom', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), '1.00', true );
    

    What is the registered prerequisite name for the RS init code?

  3. 3 Posted by theMikeD on 18 Dec, 2013 12:19 AM

    theMikeD's Avatar

    For example, this doesn't work:

    wp_enqueue_script( 'jquery.custom', get_stylesheet_directory_uri().'/js/custom.js', array('jquery','new-royalslider-main-js'), '1.00', true );
    

    with this JS code in custom.js

    jQuery(document).ready(function($) {
        $('.royalSlider').append("<div class='rsPlayPause' id='toggleAutoPlayBtn'>Pause</div>");
    });
    
  4. 4 Posted by theMikeD on 18 Dec, 2013 01:05 AM

    theMikeD's Avatar

    Also, in the code supplied, the variable autostart has to somehow be derived. I see in the API guide no way to determine the state of "autoplay." Can you advise on how this should be done as well please?

    EDIT

    var slider = $(".royalSlider").data('royalSlider');
    console.log(slider.st.autoPlay.enabled);
    

    does the trick for the current state

  5. 5 Posted by theMikeD on 18 Dec, 2013 01:21 AM

    theMikeD's Avatar

    One more question. In the linked JS code, the last line is

    $('#your-slider-id').royalSlider('toggleAutoPlay');
    

    How is the ID to be determined?

  6. 6 Posted by theMikeD on 18 Dec, 2013 05:21 AM

    theMikeD's Avatar

    Lot of typing in this thread tonight :)

    OK, I've managed to work around most of the issues I mentioned and got the custom JS to load after the RS init. That is all working...however, the slideshow autoplay is not working.
    Sample site:

    http://abby.themiked.ca/?p=12

    If you click play, it shows the next slide and then stops. What it should do is keep playing the slideshow until pause is clicked. So apparently

    $('#new-royalslider-2').royalSlider('toggleAutoPlay');
    

    isn't doing the trick.

    So there are two issues remaining.

    1. How do I get the ID of the slideshow into the JS?
    2. How do I get the slideshow to keep playing?

    Help!

  7. Support Staff 7 Posted by Dmitry Semenov on 18 Dec, 2013 09:19 AM

    Dmitry Semenov's Avatar

    Hi,

    In WP version autoplay option should be enabled at start, as if you don't - plugin will exclude its module and start/stop autoplay methods will be useless.

    You don't necessarily need to target slider by id, you may loop through all of them, e.g.:

    jQuery(document).ready(function($) {
    
        $('.royalSlider').each(function() {
    
          var autoStart = true;
          var slider = $(this);
          var button = $('<button>pause</button>').insertAfter(slider).click(function() {
    
            if(autoStart) {
                $(this).html('play');
            } else {
                $(this).html('pause');
            }
            autoStart = !autoStart;
    
            slider.royalSlider('toggleAutoPlay');
          });
    
        });
        
    
    });
    
  8. 8 Posted by theMikeD on 18 Dec, 2013 02:16 PM

    theMikeD's Avatar

    So if I understand this right...if autoplay is not enabled in the slideshow options it cannot be turned on after-the-fact. Is that right? Is there a way using settings to enable autoplay but start paused? Or force the loading of the autoplay code regardless of the options selected in the admin area?

    I must admit, all this hackery seems a bit unusual for a feature that should be standard and easily-enabled.

  9. 9 Posted by theMikeD on 18 Dec, 2013 03:27 PM

    theMikeD's Avatar

    FTR, here is how to hack the WP plugin to get the custom JS to appear after the RS initi code.

    In functions.php, add this code

    /*Adding a play/pause button is done using jQuery because: 
            "If you wish the button to be in slider wrapper, you'll need to append it 
            via jQuery inside .royalSlider container after the slider is initialized."
    
     The problem is that the initialization code is not done using wp_register_script, it's created on-the-fly
     and done using a direct call to wp_print_footer_scripts so there is no way to 
     *get* a handle on the prerequisite script because there isn't one. And so there's no way to get the custom.js
     to appear after it because there's nothing to add to the custom.js wp_enqueue_script prerequisite list.
    
     So, we too force the issue and insert our code after the RS code by setting a very low priority. 
     ( http://help.dimsemenov.com/discussions/royalslider-wordpress/5102-playpause-button-code-for-wordpress ) */
    add_action( 'wp_print_footer_scripts', 'md_load_custom_js', 100 );
    function md_load_custom_js() {
        $dir = get_stylesheet_directory_uri();
        echo "<script type='text/javascript' src='" . $dir . "/js/custom.js?ver=1.00'></script>";
    }
    
  10. Support Staff 10 Posted by Dmitry Semenov on 18 Dec, 2013 08:53 PM

    Dmitry Semenov's Avatar

    Is there a way using settings to enable autoplay but start paused?

    You may just call slider.royalSlider('stopAutoPlay');

    Thanks for sharing full code, I'm sure it'll help someone.

    Dmitry

  11. 11 Posted by freeform1999 on 21 Mar, 2014 09:20 PM

    freeform1999's Avatar

    I got the play/pause code with 'auto-made-button' to work
    BUT does anyone know the JS code to put on my own trigger buttons that I can put anywhere I want in my page? Maybe there's something real simple in the code I simply put on a normal button? (Sorry, my js skills are not the best.)


    ( FWIW - for my current site I want to toggle the RS play/pause whenever one clicks to play any video on my web page, whether it's one of my FlowPlayer videos down the page OR a video on a slide in my RS. (FlowPlayer can fire off a JS when one plays or stops it.) This way the slider stops sliding while they watch the video but if they click it to stop it from playing the slider will start sliding again. )

    BTW, to get the JS to initialize at the footer properly I used the cool plugin 'CSS & Javascript Toolbox', very easy & works great!

    Thanks Dimitry or anyone else that is wise!

  12. Support Staff 12 Posted by Dmitry Semenov on 22 Mar, 2014 08:49 PM

    Dmitry Semenov's Avatar

    @freeform1999, you may bind click event to any element, http://api.jquery.com/click/

  13. 13 Posted by freeform1999 on 22 Mar, 2014 09:51 PM

    freeform1999's Avatar

    Thanks Dmitry!
    I've tried to trigger the function with a button several ways but my code attempts don't work. Any chance you could show us all the basic code to do this? It'll probably be handy for others too.

    (Sorry, I know this is all fairly basic JS stuff but I'm not great at js yet... learning here though.) Thanks!!!

  14. Support Staff 14 Posted by Dmitry Semenov on 23 Mar, 2014 07:13 PM

    Dmitry Semenov's Avatar

    @freeform1999, add button/element with class some-button-class to page, make sure that auto-play option is enabled, then add to functions.php:

    // Add this to your theme functions.php
    function add_additional_rs_code() {
        ?>
        $('.some-button-class').click(function() {
             $('.royalSlider').royalSlider('toggleAutoPlay');
        });
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    
  15. 15 Posted by freeform1999 on 24 Mar, 2014 03:31 AM

    freeform1999's Avatar

    Yea!!! That works perfectly!

    You might consider making a demo showing these type of remote controls.
    Regardless, major thanks Dmitry, you offer the best support experience I've ever had with web tech!

  16. 16 Posted by freeform1999 on 24 Mar, 2014 06:56 AM

    freeform1999's Avatar

    BTW - At the risk of sounding greedy can you also show the code to trigger 'play' or 'pause' rather then 'toggleAutoPlay'? (ideally all would be available on the same page.) Just to have all the options handy for controling the slider remotely. Most grateful!

  17. Support Staff 17 Posted by Dmitry Semenov on 24 Mar, 2014 03:44 PM

    Dmitry Semenov's Avatar

    Use startAutoPlay/stopAutoPlay methods.

    Dmitry

  18. 18 Posted by freeform1999 on 24 Mar, 2014 04:32 PM

    freeform1999's Avatar

    That works.. THANKS AGAIN Dmitry!

    For others, here's what worked for me:
    Add button/element with class some-button-class to page, make sure that auto-play option is enabled,
    then add to functions.php:

    // Add this RoyalSlider 'remote control' to your theme functions.php
    function add_additional_rs_code() {
        ?>
        $('.toggleAutoPlay-royalslider').click(function() {
             $('.royalSlider').royalSlider('toggleAutoPlay');
        });
        $('.startAutoPlay-royalslider').click(function() {
             $('.royalSlider').royalSlider('startAutoPlay');
        });
        $('.stopAutoPlay-royalslider').click(function() {
             $('.royalSlider').royalSlider('stopAutoPlay');
        });    
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    
  19. Support Staff 19 Posted by Dmitry Semenov on 24 Mar, 2014 06:27 PM

    Dmitry Semenov's Avatar

    Thanks for sharing code, I'm sure it'll help someone.

  20. 20 Posted by will on 29 Mar, 2017 03:21 AM

    will's Avatar

    Me! It helped me.

  21. 21 Posted by chrisfawkes on 16 Nov, 2018 06:06 PM

    chrisfawkes's Avatar

    This is the code I have added and it puts the play/pause button on the slideshow but it always starts off playing.

    I would like it to start paused with the option to play. What am I missing here?

    function your_function() {
        ?>
        <script>
    jQuery(document).ready(function($) {

        $('.royalSlider').each(function() {

          var autoStart = true;
          var slider = $(this);
          var button = $('<button>pause</button>').insertAfter(slider).click(function() {

            if(autoStart) {
                $(this).html('play');
            } else {
                $(this).html('pause');
            }
            autoStart = !autoStart;

            slider.royalSlider('stopAutoPlay');
          });

        });
        

    });
        </script>
       <?php
    }
    add_action('wp_footer', 'your_function', 100);
    ?>

    @@@@

  22. 22 Posted by chrisfawkes on 17 Nov, 2018 02:45 AM

    chrisfawkes's Avatar

    Solved. I ended up using the 'snippets' plugin to add additional code. This is what I ended up with.

    function your_function() {
        ?>
        <script>
    jQuery(document).ready(function($) {
    
        $('.royalSlider').each(function() {
    
          var autoStart = false;
          var slider = $(this);
          slider.royalSlider('stopAutoPlay');
          var button = $('<button>play</button>').insertAfter(slider).click(function() {
    
            if(autoStart) {
                $(this).html('play');
            } else {
                $(this).html('pause');
            }
            autoStart = !autoStart;
    
            slider.royalSlider('toggleAutoPlay');
          });
    
        });
        
    
    });
        </script>
       <?php
    }
    add_action('wp_footer', 'your_function', 100);
    ?>
    

    Then in custom CSS for my theme I styled and gave some space between the slideshow and the button with

    button{ 
    background-color:#000000;
    color:#ffffff;
    display: block;
        margin-left: auto;
        margin-right: auto;
    margin-top: 12px;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac