Initialize Royal Slider on AJAX Pages

Peter Mandell's Avatar

Peter Mandell

18 Mar, 2013 06:54 PM

My WordPress theme loads pages via AJAX. I have successfully loaded the slider through "echo get_new_royalslider($sliderID)" but the slider is still not initializing. How can I get the correct jQuery code (including the specific options for the given slider) and run it after the AJAX is complete. Any help would be much appreciated! Thanks!

  1. 1 Posted by Peter Mandell on 18 Mar, 2013 07:20 PM

    Peter Mandell's Avatar

    Each post uses a different slider, so the options are different. Therefore I cannot setup the jQuery init code before hand. I basically need to export the royalSlider options for each slider on the fly.

  2. Support Staff 2 Posted by Dmitry Semenov on 18 Mar, 2013 08:26 PM

    Dmitry Semenov's Avatar

    Hello,

    Most likely your theme cuts wp_footer part where slider JS initialization code is printed. As ajax on frontend is not standardized by WordPress, and it's just what "your theme does" to make the page transition fancier, you'll have to add custom code to make it work with third party plugins like RoyalSlider.

    Instructions below assume that you have PHP coding experience. Basically there are just two steps:

    1. Print the HTML markup of slider via get_new_royalslider function, or add it to page as usual just with shortcode.
    2. Print JS init code and make sure that it fires after your ajax-content is loaded and added to page.

    E.g.:

    $sliderid = 1; // The ID of slider
    
    /* Print slider HTML, skip this part if you already have it on page */
    echo get_new_royalslider($sliderid); 
    /* Print slider END */
    
    
    // Include RoyalSlider lib
    include_once(ABSPATH.'wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php');
    
    // The sliders_init_code is an array that holds JS initialization code of each slider that is/was on the page
    $init_codes = NewRoyalSliderMain::$sliders_init_code;
    
    // You may print all init codes like so:
    if(count($init_codes) > 0 ) {
      echo '<script>';
          echo "jQuery(document).ready(function($) {\n";
            foreach($init_codes  as $key => $value) {
                    echo $value;
            }
          echo "});\n";
      echo '</script>';
    }
    
    // Or optionally print only last item of $init_codes array, to get init code of $sliderid only.
    

    Also, don't forget to call destroy() method on slider ( $('.royalSlider').royalSlider('destroy') ) before the page with it is removed. As if you don't - you might get a memory leak.

    You may also initialize it manually. Here is HTML version documentation - http://dimsemenov.com/plugins/royal-slider/documentation/

    Dmitry

  3. 3 Posted by Peter Mandell on 19 Mar, 2013 01:09 AM

    Peter Mandell's Avatar

    <b>Fatal error</b>: Cannot redeclare class NewRoyalSliderMain in <b>/homepages/34/d122702088/htdocs/goodfello/wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php</b> on line <b>4</b><br />

    When I try it without requiring the class, count($init_codes) is not greater than 0.

    Please help!

  4. 4 Posted by gspiliog on 19 Mar, 2013 01:16 PM

    gspiliog's Avatar

    @Peter i m having same problem and have no idea how to do it.

  5. Support Staff 5 Posted by Dmitry Semenov on 19 Mar, 2013 03:49 PM

    Dmitry Semenov's Avatar

    How exactly are you adding slider calss?

    Have you tried just?:

    include_once "path";
    
  6. 6 Posted by Peter Mandell on 19 Mar, 2013 06:17 PM

    Peter Mandell's Avatar

    It does not error now, but that's because the class has already been included successfully.

    $init_codes is still NULL.

  7. 7 Posted by gspiliog on 19 Mar, 2013 06:33 PM

    gspiliog's Avatar

    @Peter can you give me details/guide on how to implement it?

  8. 8 Posted by Peter Mandell on 19 Mar, 2013 06:38 PM

    Peter Mandell's Avatar

    @gspiliog I still haven't gotten it working. If I do, I will let you know!

  9. Support Staff 9 Posted by Dmitry Semenov on 20 Mar, 2013 06:14 AM

    Dmitry Semenov's Avatar

    Please attach your template file where you add this code and slider.

    Dmitry

  10. 10 Posted by gspiliog on 20 Mar, 2013 06:24 AM

    gspiliog's Avatar

    I'm having this. If Dmitry you referring to Peter, please forgive me.

  11. 11 Posted by Peter Mandell on 20 Mar, 2013 12:15 PM

    Peter Mandell's Avatar

    Attached is my AJAX function. Thanks for your continued assistance.

  12. Support Staff 12 Posted by Dmitry Semenov on 20 Mar, 2013 06:04 PM

    Dmitry Semenov's Avatar
                               $sliderid = 1;
    echo get_new_royalslider($sliderid);
    
    // Init code
    include_once(ABSPATH.'wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php');
    $init_codes = NewRoyalSliderMain::$sliders_init_code;
    if(count($init_codes) > 0 ) {
      echo '<script>';
          echo "jQuery(document).ready(function($) {\n";
            foreach($init_codes  as $key => $value) {
                    echo $value;
            }
          echo "});\n";
      echo '</script>';
    }
    

    I tested code above, should work everywhere, even in ajax request.

    Dmitry

  13. 13 Posted by gspiliog on 20 Mar, 2013 06:16 PM

    gspiliog's Avatar

    Hi. Should i add it to custom.js at the zip with Folio Two that send you
    before?

    *....................................................*
    *George Spiliopoulos*
    *
    *
    *E: *[email blocked]
    *E: *[email blocked]
    *T:* @spiliog

    *
    *
    *Sent from my iDevice. *

  14. Support Staff 14 Posted by Dmitry Semenov on 20 Mar, 2013 09:05 PM

    Dmitry Semenov's Avatar

    @gspiliog This PHP code should be executed inside function that generates ajax content. If you're not experienced in php, I strongly don't recommend to edit anything by yourself.

    Dmitry

  15. 15 Posted by Hristo Simeonov on 22 Apr, 2013 07:36 PM

    Hristo Simeonov's Avatar

    I am having the same problem but integrating it with RoyalSlider.
    Where exactly do we need to incorporate the code that you mention?
    Maybe we can find a solution and post it to the community.
    Thanks and have a great day!
    Hristo

    $sliderid = 1; echo get_new_royalslider($sliderid);

    // Init code include_once(ABSPATH.'wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php');
    $init_codes = NewRoyalSliderMain::$sliders_init_code; if(count($init_codes) > 0 ) {
    echo ''; }

  16. 16 Posted by Hristo Simeonov on 22 Apr, 2013 09:26 PM

    Hristo Simeonov's Avatar

    I meant to say integrating Royal Slider with Advanced Ajax page loader.

  17. Support Staff 17 Posted by Dmitry Semenov on 23 Apr, 2013 06:36 PM

    Dmitry Semenov's Avatar

    I have no experience with "Advanced Ajax page loader". $init_codes array holds initialization Strings for RoyalSliders on current page, you may echo it where you need init code to be.

    Dmitry

  18. 18 Posted by joey on 12 Sep, 2013 08:50 PM

    joey's Avatar

    I've used the php exec shortcode plugin referenced above with the same script Dmitry pasted and can get the second slider to work in my post series but still get this error, which is making all other sliders past the second one not function.

    TypeError: 'undefined' is not a function (evaluating '$('.new-royalslider-5').royalSlider')

    Can anyone shed some light on this for me?

    http://accessmarketinginc.com/site/our-results (click "Next Project")

    Thanks for the help.

  19. Support Staff 19 Posted by Dmitry Semenov on 12 Sep, 2013 08:57 PM

    Dmitry Semenov's Avatar

    @Joey You have two jQuery.js on page, should be just one.

    Also, your page lags a lot when I click "Next Project".

    Dmtiry

  20. 20 Posted by joey on 12 Sep, 2013 09:01 PM

    joey's Avatar

    Thanks Dmitry for the fast response!

    I'll do some searching for the extra jQuery.js as I'm not sure where it's coming from. Hopefully that'll solve my issue.

    Thanks again.

  21. 21 Posted by shir on 02 Dec, 2013 01:01 PM

    shir's Avatar

    Hi everyone,

    I've found very simple solution for everyone who finds PHP unfamiliar.
    Copy the next chunk of code into your functions.php

    function fire_royalslider_func($atts){
        $sliderid = $atts['id'];
        
        
        if (!$sliderid) return;
       /* Print slider HTML, skip this part if you already have it on page */
        echo get_new_royalslider($sliderid); 
        /* Print slider END */
        
        // Init code
        include_once(ABSPATH."wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php");
        $init_codes = NewRoyalSliderMain::$sliders_init_code;
        if(count($init_codes) > 0 ) {
          echo "<script>";
              echo "jQuery(document).ready(function($) {\n";
                foreach($init_codes  as $key => $value) {
                        echo $value;
                }
              echo "});\n";
          echo "</script>";
          }
    }
    
    add_shortcode("fire_royalslider", "fire_royalslider_func");
    

    Now, everytime you wish to load royalslider, instead of the regular shortcode, use [fire_royalslider id="X"] where you replace X with slider ID.
    Works for me.

    Thanks Dmitry for the solution above.

  22. Support Staff 22 Posted by Dmitry Semenov on 02 Dec, 2013 04:18 PM

    Dmitry Semenov's Avatar

    @Shir, thank you very much, I'm sure this will help someone.

  23. 23 Posted by mike on 16 Jan, 2014 07:04 AM

    mike's Avatar

    I tried putting this in the functions.php as stated and the page completely fails to load....

    Any ideas? I purchased this plug in based purely on hoping this fix would work for me! I am a total none developer just doing this one site for my own startup company so I apologise if my questions seem stupid.

    I am on latest version of WP.

  24. 24 Posted by shir on 16 Jan, 2014 07:30 AM

    shir's Avatar

    Hi @mike,

    could you send me link that I can see what's wrong? It seems that pasting the code was not made correctly and you have PHP error. Try to enable the wp_debug on you wp-config.php so you will get a clear error message.

  25. 25 Posted by mike on 16 Jan, 2014 07:49 AM

    mike's Avatar

    www.revfx.tv/web2014

    the page with the slider is MIRAGE

    note this site is in a subfolder (web2014) until I take it live and it
    has a local installation of wordpress in that subfolder folder too...

    I have attached my functions.php file prior to making any changes.

    Thank you so much for the help!

    best regards

    i can

  26. 26 Posted by shir on 16 Jan, 2014 08:27 AM

    shir's Avatar

    Hi again,

    I can't find it on your functions.php, So I've just added it to your file. First backup your original file, then replace it with the file I've attached.

    Let me know if the site loads or not. If not, please check you did not paste this code on any other file, so you have duplicate function.

  27. 27 Posted by mike on 16 Jan, 2014 08:38 AM

    mike's Avatar

    Thank you so much again for the help, we seem to be making progress in
    that the page now loads without the error messages.

    However, it still doesnt load the slider correctly. Now it shows each of
    the featured images one below the other...

    I'm using
    [divider]
    [fire_royalslider id="2"]
    [divider]

    in the page to call the slider. Is this the correct syntax?

    best regards

    Mike

  28. 28 Posted by shir on 16 Jan, 2014 08:41 AM

    shir's Avatar

    Hi again,

    For some reason I can't see the result on the Mirage page. The shortcode seems to be correct. If I could see the result on the page, I would see if there are any JS errors. Please send the exact URL where I can see the result.

    Thanks

  29. 29 Posted by mike on 16 Jan, 2014 08:44 AM

    mike's Avatar

    http://revfx.tv/web2014/?page_id=814

    is the page with the misloading slider.

    best regards

    Mike

  30. 30 Posted by shir on 23 Jan, 2014 07:27 AM

    shir's Avatar

    Hi Mike,

    Sorry for this late response ...
    although I coulnd't see the problem in your page, I retested it on another Ajax emplate I bought and you are rught, I missed one inportant line that registers the files for the while template:
    register_new_royalslider_files(any_slider_id_here);

    Where you should replace "any_slider_id_here" with a real existing slider ID.

    So the full code should be like this (add it to your theme functions.php):

    function fire_royalslider_func($atts){
        $sliderid = $atts['id'];
        $out = '';
        
        if (!$sliderid) return;
       /* Print slider HTML, skip this part if you already have it on page */
        $out .= get_new_royalslider($sliderid); 
        /* Print slider END */
        
        // Init code
        include_once(ABSPATH.'wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php');
        $init_codes = NewRoyalSliderMain::$sliders_init_code;
        if(count($init_codes) > 0 ) {
          $out .= '<script>';
              $out .= "jQuery(document).ready(function($) {\n";
                foreach($init_codes  as $key => $value) {
                        $out .= $value;
                }
              $out .= "});\n";
          $out .= '</script>';
          }
          return $out;
    }
    
    add_shortcode('fire_royalslider', 'fire_royalslider_func');
    

    and shortcode will be [fire_royalslider id="123"], where 123 is ID of slider.

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