Scrolling thumbnails stops working after calling updateSliderSize

jay's Avatar

jay

02 Aug, 2017 04:48 AM

Have a gallery slider with lazy loaded images, calling $('.royalSlider').royalSlider("updateSliderSize", true); after a delay to properly size things for mobile which works fine. However, once that is called, the thumbnails no longer slide. Please check following codepen:

https://codepen.io/anon/pen/LjZBJZ

  1. Support Staff 1 Posted by Dmitry Semenov on 02 Aug, 2017 06:08 AM

    Dmitry Semenov's Avatar

    Hello,

    Not quite sure if I understand why do you call updateSize in touchmove and touchend event listeners, it's quite resource-intensive method and should not be called during such often-occurring events. The plugin automatically calls it on page resize, no need to do this twice. Please elaborate.

  2. 2 Posted by jay on 02 Aug, 2017 03:13 PM

    jay's Avatar

    Thanks for the fast response, am only calling updateSliderSize once 300ms
    after pageload (to give the first image a chance to load). This provides
    correct sizing, but disables the thumbnail scrolling. Maybe there is a
    better way to set sizing for lazy loaded images?

    Thanks,
    - Jay

  3. 3 Posted by jay on 02 Aug, 2017 03:49 PM

    jay's Avatar

    Should also say that I'm trying to get the image to fill the width, tried
    using both css and autoScaleSliderWidth and while they work fine on desktop
    resolution, when viewing mobile screen widths the large image is not
    consistently sized. This is where
    calling $('.royalSlider').royalSlider("updateSliderSize", true) came into
    play, which corrects the image sizing for the screen width but can no
    longer scroll the thumbnails. Have the updateSliderSize call disabled on
    this page so you can see the image issue but if you call it
    via console or resize the page so that the slider has to resize, then the
    scrolling thumbnails stop scrolling.

    I probably could restructure the slider to not use lazy loaded images, but
    galleries could be an arbitrary number of images so I like that it lazy
    loads.

    Thanks!
    - Jay

  4. Support Staff 4 Posted by Dmitry Semenov on 02 Aug, 2017 06:16 PM

    Dmitry Semenov's Avatar

    Oh. It seems you're missing styles from RoyalSlider skin CSS file (rs-default.css in your case). For example, styles for .rsNav (thumbnails) element are missing (it should have fixed height).

  5. 5 Posted by jay on 02 Aug, 2017 10:41 PM

    jay's Avatar

    Oh, interesting, I must have thought the skin css file was optional or overrides only. Apologies for my oversight, and thanks again for your help!

  6. jay closed this discussion on 02 Aug, 2017 10:42 PM.

Comments are currently closed for this discussion. You can start a new one.

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