sliders with thumbnails behave different at same page

wilhelm.kleinoeder's Avatar

wilhelm.kleinoeder

23 Aug, 2021 01:05 PM

Hello Dimitry.

I implemented 3 sliders at one page, which is here:
https://foto-aktiv.meine-art-zu-sehen.de/schwarzweiss-umwandlung-mit-photoshop/

<p>[gallery royalslider="1" type="thumbnails" link="file" size="medium" ids="1797,1798,1799,1800,1801,1802,1803,1804"]</p>
...
<p>[gallery royalslider="1" type="thumbnails" link="file" size="medium" ids="1766,1767,1768,1769,1770,1771,1772,2149"]</p>
...
<p>[gallery royalslider="1" type="thumbnails" link="file" size="medium" ids="1775,1776,1777,1778,1779,1780,1781"]</p>

When I hover at the first slider, the picture changes immediately and at the inspector I can see changing "rsNavSelected" when I move the mouse to the next picture.

This is not the case for the second and third slider. There I need to click at the thumbnail to cause the picture changing. It is also strange that I can see in the inspector the "rsNavSelected" for the first slider changing when I hover the thumbnails from slider two and three.

Do you have any idea what causes this behavior?

Wilhelm

  1. Support Staff 1 Posted by Dmitry Semenov on 24 Aug, 2021 01:46 PM

    Dmitry Semenov's Avatar

    Hello,

    It seems you're using some custom code to add mouseover navigation, because it's not a built-in feature. Can you post this code please.

    Dmitry

  2. 2 Posted by wilhelm.kleinoe... on 24 Aug, 2021 04:14 PM

    wilhelm.kleinoeder's Avatar

    Thank you, Dimitry, for your reply.

    Yes, I use an own skin with free cursor, but there is the same behavior with the universal skin. Attached are the files I use. For the css-file I use a minified version. The site is optimized with W3 Total Cache which also caused some problems which I think that they are solved now (switched lazy loading to off).

    For the mouseover I made a try in the function.php but commented it out due to a critical error on the site. I forgot this till today when I saw it here again. I assumed that the mouseover might be implemented already.

    Wilhelm

  3. 3 Posted by wilhelm.kleinoe... on 24 Aug, 2021 05:44 PM

    wilhelm.kleinoeder's Avatar

    Hello Dimitry.

    It seems that you have asked the right question. When I comment out the whole part of the function add_additional_rs_code() ... (not only partly as I did it) then the mouseover does not work anymore. So I need to get the rest of this function to work correctly.

    Have you any suggestion for me to go on further?

    Wilhelm

  4. Support Staff 4 Posted by Dmitry Semenov on 24 Aug, 2021 05:50 PM

    Dmitry Semenov's Avatar

    You have this code that adds mouseover navigation:

    function add_additional_rs_code() {
        ?>
        
        var slider = $(".royalSlider").data('royalSlider');
        
        $('.rsNavItem').mouseover(function() {
            slider.goTo($(this).index());
        });
        
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    

    to affect multiple sliders, it should be changed to something like:

    function add_additional_rs_code() {
        ?>
        
        $('.royalSlider').each(function() {
          var slider = $(this).data('royalSlider');
        
          $(this).find('.rsNavItem').mouseover(function() {
             slider.goTo($(this).index());
          });
        });
        
        
        <?php
    }
    add_action('new_rs_after_js_init_code', 'add_additional_rs_code');
    
  5. 5 Posted by wilhelm.kleinoe... on 24 Aug, 2021 06:02 PM

    wilhelm.kleinoeder's Avatar

    Hello Dimitry.

    Absolutely excellent, it works like a charm.

    I'm not that firm with php so I assumed that "?> ... <?php" would have commented out the code in between. But it seems that this is not the case, as I see it does the work. Perhaps I need to do extra php-lessons.

    Wilhelm

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