Home → RoyalSlider WordPress Issues →

Royalslider + Catch Infinite Scroll

• Edit

tommaso.fantini

21 Nov, 2020 04:33 PM

Hello,

i am trying to implement Infinite Scroll on my website, but when i enable it Royalslider wont load. Posts are showing but the slider on them seems not to work, while texts or images are showing (i did a test).

Can you help me find where the issue is?

Thank you very much for the support and the wonderful plugin.

Best,

Tommaso

1. 1 Posted by tommaso.fantini on 21 Nov, 2020 04:40 PM

   

   link to website: https://vg13.ch/

   • Edit

2. Support Staff 2 Posted by Dmitry Semenov on 22 Nov, 2020 12:07 PM

   

   Hello,

   Depending on your infinite scroll implementation, slider might not be able to initialize itself (as by default init code is placed in footer). If you know JS - you may trigger initialization function manually when infinite scroll loads the content.

   You may also use this (it creates custom shortcode that has initialization code placed inline) -
   https://gist.github.com/dimsemenov/ba17b5f94642c12370e5f7f7d7781c27

   • Edit

3. 3 Posted by tommaso.fantini on 22 Nov, 2020 02:58 PM

   

   Dear Dimitri,

   Thank you for your reply!!

   After i place the code in the function sheet of the site, is there a way to make it default without placing each time the shortcode?

   I am using the Royalslider override to embed it in the whole site...

   • Edit

4. Support Staff 4 Posted by Dmitry Semenov on 22 Nov, 2020 06:06 PM

   

   Please elaborate what you mean by "default".

   You may change the code to use a different shortcode name (instead of fire_royalslider).

   • Edit

5. 5 Posted by tommaso.fantini on 22 Nov, 2020 06:10 PM

   

   I added the code you gave me via a PHP inserter.

   In my posts i don't use a Shortcode to get Royalslider, since i use the option to override the Wordpress Gallery.

   So i don't know where to add the Shortcode [fire_royalslider].

   I hope i made myself clealer!

   Thank you again for the support!

   • Edit

6. Support Staff 6 Posted by Dmitry Semenov on 22 Nov, 2020 06:52 PM

   

   Oh. The code that I posted can be used only with a custom or posts slider.

   But since all your galleries use the same initialization code, you may add it directly.

   Here is the code that your current website uses:

   $('.royalSlider').royalSlider({template:'default',image_generation:{lazyLoading:!0,imageWidth:'',imageHeight:'',thumbImageWidth:'',thumbImageHeight:''},thumbs:{thumbWidth:96,thumbHeight:72},autoPlay:{delay:1000},video:{forceMaxVideoCoverResolution:'standard'},width:'100%',height:700,autoScaleSlider:!0,autoScaleSliderWidth:500,autoScaleSliderHeight:500,imageScaleMode:'fit',imageScalePadding:0,controlNavigation:'none',arrowsNav:!1,transitionType:'fade',transitionSpeed:10,loop:!0,numImagesToPreload:1});
   

   You should execute it each time your lazy-loading script adds the content, most libraries have an API event for that.

   • Edit

7. 7 Posted by tommaso.fantini on 22 Nov, 2020 07:00 PM

   

   I guess this goes slightly beyond my WP capabilities.

   If you have a piece of code i can use to recall the RS code each time it would be great. Otherwise i guess i already took advantage of your courtesy.

   Thanks a lot!

   • Edit

8. Support Staff 8 Posted by Dmitry Semenov on 22 Nov, 2020 07:23 PM

   

   I'd need to know what kind of infinite scroll are you using. Are you using some specific plugin for it? Or can you create a test page with it?

   • Edit

9. 9 Posted by tommaso.fantini on 22 Nov, 2020 08:20 PM

   

   I am using Catch Infinite Scroll (https://wordpress.org/plugins/catch-infinite-scroll/)

   • Edit

10. Support Staff 10 Posted by Dmitry Semenov on 22 Nov, 2020 08:36 PM

    

    It seems that plugin uses self-written infinite scroll implementation without public API, so unfortunately there is no option to hook into it without modifying the source.

    • Edit

11. 11 Posted by tommaso.fantini on 23 Nov, 2020 11:18 AM

    

    Would it be better with another Plugin? Such as Jetpack or similar?

    Thanks again for the support.

    • Edit

12. Support Staff 12 Posted by Dmitry Semenov on 23 Nov, 2020 07:00 PM

    

    I'd need a link to the source of the specific plugin (or to a page with it) to tell you that. I haven't used infinite scrolling plugins myself for such type of content, so can't recommend a specific one.

    • Edit

13. 13 Posted by tommaso.fantini on 12 Dec, 2020 01:45 PM

    

    is there a way to apply the shortcode you provided me

    [fire_royalslider id="YOUR_SLIDER_ID"]

    to the whole front page?

    i tried some options and the shortcode seems to work but i need to apply it to the whole page in order to make in work!

    Thanks.

    Tom

    • Edit

14. 14 Posted by tommaso.fantini on 12 Dec, 2020 02:00 PM

    

    I got it via putting the shortcode in the PHP template of each post.

    Now it's working, but the royalslider counter doesn't work anymore.

    Is there a solution to that as well? Best,

    Tommaso

    • Edit

15. Support Staff 15 Posted by Dmitry Semenov on 12 Dec, 2020 09:00 PM

    

    You'd need to execute a code for it each time a new block of content is loaded. Currently, your counter code runs only once on page load.

    • Edit

16. 16 Posted by tommaso.fantini on 13 Dec, 2020 08:25 AM

    

    You have any piece of code that could implement this?
    Like do i have to add something into the content of each post to recall the action of the counter?

    • Edit

17. Support Staff 17 Posted by Dmitry Semenov on 13 Dec, 2020 10:28 AM

    

    Yes, either that, or you can put it inside fire_royalslider shortcode. I don't have a code for it, but you may post yours and I'll check what might be wrong.

    • Edit

18. 18 Posted by tommaso.fantini on 14 Dec, 2020 10:01 PM

    

    This is the piece of code.
    Then I applied the fire_royalslider plugin in the template of the posts.

    Thank you again for the support!

    Best,
    Tom

    /*ROYALSLIDER_COUNTER_________________*/

    function add_royalslider_index_indicator() {
        ?>
        <script type="text/javascript">
        jQuery(document).ready(function($) {
            $('.royalSlider').each(function() {
                var slider = $(this);
                var sliderInstance = slider.data('royalSlider');

                if(sliderInstance) {
                    var slideCounter = $('<div class="rsSlideCount"></div>').appendTo( slider );

                    var updCount = function () {
                        slideCounter.html( (sliderInstance.currSlideId+1) + '/' + sliderInstance.numSlides );
                    }
                    sliderInstance.ev.on('rsAfterSlideChange', updCount);
                    updCount();
                }

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

    /*FIRE_ROYALSLIDER_________________*/

    function fire_royalslider_func($atts){
        $sliderid = $atts['id'];
        $out = '';

        if (!$sliderid) {
    return $out;
        }

        $out .= get_new_royalslider($sliderid);

        // Init code
        include_once(ABSPATH.'wp-content/plugins/new-royalslider/classes/NewRoyalSliderMain.php');
        $init_codes = NewRoyalSliderMain::$sliders_init_code;
    if ( is_array($init_codes) && isset($init_codes[$sliderid]) ) {
    $out .= '<script>';
    $out .= "jQuery(document).ready(function($) {\n";
    $out .= $init_codes[$sliderid];
    $out .= "});\n";
    $out .= '</script>';
    }
    return $out;
    }

    add_shortcode('fire_royalslider', 'fire_royalslider_func');

    • Edit

19. Support Staff 19 Posted by Dmitry Semenov on 15 Dec, 2020 05:42 AM

    

    The code that you output in wp_footer filter should be moved into fire_royalslider shortcode (so it appears after every slider, or after every new page), also you need to check whether the counter was initialized already or not (before adding it). Unfortunately, such modification is beyond the support scope, so can't provide the exact code.

    • Edit