setThumbsOrientation not working on ios, and fullscreen not resizing img on firefox

nbj's Avatar

nbj

19 May, 2017 11:34 AM

Okay. I have several issues. First of all, i'm changing the thumbnail orientation both on resize and orientation change with setThumbsOrientation, but it doesn't seem to be working on ios. At least not on iPhone 6.

Second of all on Firefox, the images aren't resized. They just stay the same size. Some times, and sometimes it works fine. It seems to be if i use slideclick to enter and exit fullscreen.

Works fine on Chrome and Android devices.

JS:

var initSlider = function(scaleHeight, tOrientation, thumbSpace){ 
                $(".royalSlider").royalSlider({
                    controlNavigation: 'thumbnails',
                    imageScaleMode:'fit-if-smaller',
                    imageAlignCenter: true,
                    autoScaleSlider: true,
                    autoScaleSliderWidth: 600,     
                    /* autoScaleSliderHeight: 480, */
                    autoScaleSliderHeight: scaleHeight,
                    arrowsNavAutoHide:  false,
                    loop: true,
                    startSlideId:   i,
                    addActiveClass: true,
                    thumbs: {
                        // thumbnails options go gere
                        spacing: thumbSpace,
                        autoCenter: true,
                        fitInViewport: true,
                        arrowsAutoHide: true,
                        orientation: tOrientation
                        /* orientation: 'vertical' */
                    },
                    fullscreen: {
                        // fullscreen options go gere
                        enabled: true,
                        nativeFS: true
                    }
                });
            }; 
            
            
            if($(window).width() <= 567){
                initSlider(712, 'horisontal', 3);
            } else if($(window).width() > 640 && $(window).width() <= 768){
                initSlider(725, 'vertical', 6);
            } else if($(window).width() >= 1600) {
                initSlider(354, 'vertical', 10);
            } else{
                initSlider(505, 'vertical', 10);
            }
            var slider = $(".royalSlider").data('royalSlider');
            slider.ev.on('rsEnterFullscreen', function() {
                if($(window).width() > 567){
                    setTimeout(function(){
                        if($(".rsFullscreen .rsOverflow").width() > $(window).width()-96){
                            $(".rsFullscreen .rsOverflow").width($(window).width() - 96);
                        }
                    }, 600);
                }
                slider.ev.on('rsSlideClick', function(event, originalEvent) {
                    originalEvent.preventDefault();
                    slider.exitFullscreen();
                });
            });
            slider.ev.unbind('rsSlideClick');
            slider.ev.on('rsExitFullscreen', function(){
                if($(window).width() > 767 && $(window).width() < 1080){ 
                    setTimeout(function(){
                        $(".rsOverflow").width(($(window).width() - $('.product-col-2.product-detail').width())-186);
                        slider.updateSliderSize();
                    }, 600);
                }
                $("body").css("overflow-y", "visible");
                slider.ev.unbind('rsSlideClick');
            });
            $(window).on('resize', function(){
                if($(window).width() <= 567){
                    slider.setThumbsOrientation('horisontal');
                    slider.st.autoScaleSliderHeight = 712;
                    slider.st.thumbs.spacing = 3;
                } else if($(window).width() > 640 && $(window).width() <= 768){
                    slider.st.autoScaleSliderHeight = 725;
                    slider.st.thumbs.spacing = 6;
                } else if($(window).width() >= 1600){
                    slider.st.autoScaleSliderHeight = 354;
                } else {
                    slider.setThumbsOrientation('vertical');
                    slider.st.autoScaleSliderHeight = 505;
                    slider.st.thumbs.spacing = 10;
                }
            });
            $(window).on("orientationchange",function(){
                if($(window).width() > 767){
                    $(".rsOverflow").width(($(window).width() - $('.product-col-2.product-detail').width())-186);
                }
                if($(window).width() <= 567){
                    slider.setThumbsOrientation('horisontal');
                    slider.st.autoScaleSliderHeight = 712;
                    slider.st.thumbs.spacing = 3;
                    slider.updateSliderSize(true);

                    setTimeout(function() {
                        slider.setThumbsOrientation('horisontal');
                        slider.st.autoScaleSliderHeight = 712;
                        slider.st.thumbs.spacing = 3;
                       // transition finished, size is now correct
                       slider.updateSliderSize(true);
                    }, 200);
                } else if($(window).width() > 640 && $(window).width() <= 768){
                    slider.st.autoScaleSliderHeight = 725;
                    slider.st.thumbs.spacing = 6;
                } else if($(window).width() >= 1600){
                    slider.st.autoScaleSliderHeight = 354;
                } else {
                    slider.setThumbsOrientation('vertical');
                    slider.st.autoScaleSliderHeight = 505;
                    slider.st.thumbs.spacing = 10;
                }
            });

CSS:

.royalSlider{
    max-height: 572px;
    min-height: 332px;
}
.royalSlider.rsFullscreen{
    max-height: none;
}
.royalSlider .rsThumbsVer {
    right: auto !important;
    left: 0 !important;
}
.royalSlider .rsOverflow {
    margin-left: 96px !important; /* width of thumbnails container */
    max-width: 844px;
}

.rsFullscreen .rsOverflow{
    max-width: none;
    max-height: none;
}
.royalSlider.rsFullscreen{
    max-width: none;
}
.rsUni .rsThumb{
    box-sizing: border-box;
}
img.rsImg{
    display: block;
    max-width: 100%;
    max-height: 556px;
    margin: 0 auto;
}
.rsFullscreen img.rsImg{
    max-width: none;
    max-height: none;
}

.rsUni.rsFullscreen .rsFullscreenBtn{
    left: auto;
    top: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    width: 44px;
    height: 44px;
    border: none;
}
.rsUni.rsFullscreen .rsFullscreenBtn:after{
    content: "";
    position: static;
}
.rsUni.rsFullscreen .rsFullscreenIcn {
    background-position: 0px 10px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjIwcHgiIGhlaWdodD0iMjBweCIgdmlld0JveD0iMCAwIDIwIDIwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjcuMiAoMjgyNzYpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPmNsb3NlPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+CiAgICAgICAgPGcgaWQ9ImNsb3NlIiBzdHJva2U9IiM2ODY1NjYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMTkuNSwwLjUgTDAuNSwxOS41IiBpZD0iTGluZSI+PC9wYXRoPgogICAgICAgICAgICA8cGF0aCBkPSJNMC41LDAuNSBMMTkuNSwxOS41IiBpZD0iTGluZSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
    background-repeat: no-repeat;
    margin: 6px;
    float: none;
    width: 44px;
    height: 44px;
}
@media (min-width: 35.4375em){
    /* .rsUni .rsFullscreenBtn{
        margin-left: 48px;
    } */
    /* .rsUni.rsHor .rsArrowLeft{
        left: 90px;
    } */
    /* .rsUni.rsHor .rsArrowRight{
        right: -15px;
    } */
    .royalSliderPlace{
        width: calc(100% - 20px);
    }
    .rsUni .rsThumb{
        height: 80px;
        width: 80px;
    }
    .rsUni.rsWithThumbsHor .rsThumbsContainer{
        min-width: 100%;
    }
    .rsUni .rsThumbsHor {
        height: 80px;
    }
    .rsUni .rsThumbsVer {
        width: 96px !important;
    }
    img.rsImg{
        max-width: 556px;
    }
}
@media (max-width: 35.4375em){
    .royalSlider .rsOverflow {
        margin-left: 0 !important; /* width of thumbnails container */
    }
    .rsUni .rsThumb{
        height: 55px;
        width: 55px;
    }
    .rsUni.rsWithThumbsHor .rsThumbsContainer{
        min-width: 100%;
    }
    .rsUni .rsThumbsHor {
        height: 55px;
    }
}

Any idea how to fix this?

  1. Support Staff 1 Posted by Dmitry Semenov on 19 May, 2017 02:32 PM

    Dmitry Semenov's Avatar

    Hello,

    1. You should never modify size of .rsOverflow directly, its dimensions are always recalculated on resize (size of root element minus size of thumbnails container). So modify either root element (.royalSlider), or thumbnails (.rsNav).
    2. Using 600ms setTimeout in enter/exit fullscreen event without clearing it isn't too good of an idea if user will rapidly click twice.
    3. Don't do this slider.ev.unbind('rsSlideClick') without namespacing, you're removing existing listeners. Or just bind rsSlideClick once outside of enter-fullscreen event.
      4.setThumbsOrientation() automatically executes updateSliderSize, don't run both at once.
    4. Regarding your iOS issue, it's really hard to tell without debugging and looking at the live page. Try using Safari remote debugger and check if you're actually triggering setThumbsOrientation. Also, I do not really understand why you repeat code in resize and orientationchange events, as resize still triggers on mobile. Store the current state to avoid executing the same code multiple times.
  2. 2 Posted by nbj on 22 May, 2017 07:38 AM

    nbj's Avatar

    Okay. So far so good, the thumbsnails are placed correctly on orientation change, but in firefox, if i use slide click to exit fullscreen, and i enter fullscreen again, the images still aren't resized.

  3. Support Staff 3 Posted by Dmitry Semenov on 22 May, 2017 04:19 PM

    Dmitry Semenov's Avatar

    Can't recommend much without link to the page with the issue. Make sure that the update size method that you trigger actually fires after the page is collapsed, exitFullscreen may fire earlier.

  4. 4 Posted by nbj on 23 May, 2017 07:25 AM

    nbj's Avatar

    https://development-store-masai.demandware.net/s/masai/da_DK/tunika...

    It's not completely updated, but it's the same issue.

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