The Royal slider does not work properly in the post.

arisu19's Avatar

arisu19

07 Nov, 2017 01:27 PM

I am using a news press theme.
The Royal slider does not work properly in the post.
The problem is that the pictures can not be seen from the third photo. However, if you increase or decrease the browser size, the problem disappears.
The problem is in the post. But it works fine on the page.
Is it because it conflicts with the theme?

  1. Support Staff 1 Posted by Dmitry Semenov on 07 Nov, 2017 01:59 PM

    Dmitry Semenov's Avatar

    Hello,

    Please link to the page with the issue.

    Might be related to http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slid...

    Also, make sure that your theme or some plugin doesn't add any kind of image lazy-loading functionality.

    Dmitry

  2. 2 Posted by arisu19 on 07 Nov, 2017 02:21 PM

    arisu19's Avatar

    I added the following text to the theme functions.php file.

    function royalslider_fix_tabs () {
         ?>

    jQuery (". ui-tabs"). on ("tabsactivate", function (event, ui) {
       var slider = ui.newPanel.find ('. royalSlider');
       if (slider.length) {
           slider.royalSlider ('updateSliderSize', true);
       }
    });

         <? php
    }
    add_action ('new_rs_after_js_init_code', 'royalslider_fix_tabs');

    But it is the same.

  3. Support Staff 3 Posted by Dmitry Semenov on 07 Nov, 2017 02:36 PM

    Dmitry Semenov's Avatar

    Are you sure that your theme uses jQuery UI tabs?

    Please link to the page with the issue.

  4. 4 Posted by arisu19 on 08 Nov, 2017 02:46 PM

    arisu19's Avatar

    What is the jQuery UI tabs?
    I do not know.
    Here's the address where the problem occurs:

    https://yadong.news/archives/7287

    This address is written as a WordPress post type.
    However, writing as a page type will not cause any problems.

  5. Support Staff 5 Posted by Dmitry Semenov on 08 Nov, 2017 07:24 PM

    Dmitry Semenov's Avatar

    I'm not sure if I can reproduce the issue and the [age that you linked. Please elaborate in which exactly browser do you get the issue.

    Your theme definitely applies some actions to images, as it adds some animation class td-animation-stack-type0-2 linked to theme css file https://yadong.news/wp-content/themes/Newspaper/style.css?ver=8.1.1 It may cause the issue.

  6. 6 Posted by arisu19 on 09 Nov, 2017 07:30 AM

    arisu19's Avatar

    Image loading is difficult for all browsers I use, such as Chrome, Edge, and Explorer 11.So if I zoom in or out of my browser size, there's no problem loading the image. However, if the browser size is full-screen, the image can not be loaded.

  7. Support Staff 7 Posted by Dmitry Semenov on 09 Nov, 2017 08:24 AM

    Dmitry Semenov's Avatar

    Managed to reproduce in fullscreen mode. The opacity is applied from your theme styles. Attached screenshot.

    You may try adding something like:

    .royalSlider img {
      opacity: 1 !important;
    }
    

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