Royalslider + Catch Infinite Scroll

tommaso.fantini's Avatar

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

    tommaso.fantini's Avatar

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

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

    Dmitry Semenov's Avatar

    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

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

    tommaso.fantini's Avatar

    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...

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

    Dmitry Semenov's Avatar

    Please elaborate what you mean by "default".

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

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

    tommaso.fantini's Avatar

    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!

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

    Dmitry Semenov's Avatar

    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.

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

    tommaso.fantini's Avatar

    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!

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

    Dmitry Semenov's Avatar

    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?

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

    tommaso.fantini's Avatar

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

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

    Dmitry Semenov's Avatar

    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.

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

    tommaso.fantini's Avatar

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

    Thanks again for the support.

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

    Dmitry Semenov's Avatar

    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.

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

    tommaso.fantini's Avatar

    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

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

    tommaso.fantini's Avatar

    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

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

    Dmitry Semenov's Avatar

    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.

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

    tommaso.fantini's Avatar

    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?

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

    Dmitry Semenov's Avatar

    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.

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

    tommaso.fantini's Avatar

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

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

    Dmitry Semenov's Avatar

    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.

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