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.

  5. Support Staff 5 Posted by Dmitry Semenov on 23 May, 2017 03:53 PM

    Dmitry Semenov's Avatar

    I get 404 on the page that you linked.

    Anyway, I found another page https://development-store-masai.demandware.net/s/masai/da_DK/bluser... And "large" image in data-rsbigimg attribute seems to be smaller than in src, see attachment.

  6. 6 Posted by nbj on 24 May, 2017 08:00 AM

    nbj's Avatar

    I tried changing data-rsbigimg to a larger img, but it's still the same issue. And it works fine in chrome, and if I only use the buttons, it works fine in firefox too. I get this warning in firefox:

  7. Support Staff 7 Posted by Dmitry Semenov on 24 May, 2017 02:30 PM

    Dmitry Semenov's Avatar

    Hm, try binding simple click event instead of rsSlideClick, and check for a dragSuccess property to make sure it doesn't fire after dragging, as shown here http://help.dimsemenov.com/discussions/problems/6304-mouse-co-ordin...

  8. 8 Posted by nbj on 26 May, 2017 07:15 AM

    nbj's Avatar

    It's still the same. It's as if it doesn't grab the correct image??

  9. Support Staff 9 Posted by Dmitry Semenov on 26 May, 2017 10:55 AM

    Dmitry Semenov's Avatar

    Not sure if I understand the issue correctly then, please provide step by step instructions to reproduce and the screenshot (or screencast) of an issue.

    at page https://development-store-masai.demandware.net/s/masai/da_DK/bluser...

  10. 10 Posted by nbj on 26 May, 2017 11:12 AM

    nbj's Avatar

    In firefox, when i use the buttons, to enter and exit fullscreen, the image is larger (Screenshot1), but if i use slide click, the image dimensions stay the same (Screenshot2).

  11. Support Staff 11 Posted by Dmitry Semenov on 26 May, 2017 05:32 PM

    Dmitry Semenov's Avatar

    Great, now also please post the code that you're using to exit fullscreen.

    For now all I see in app.js is:

    // Main product image zoom
        $pdpMain.on('click', 'a.main-image', function (e) {
            e.preventDefault();
            if ($(".royalSlider").length) {
                var slider = $(".royalSlider").data('royalSlider');
                slider.enterFullscreen();
            }
            //var image = $(this).find('.primary-image');
            // removes the params of the image url 
            //var originalURL = image.attr('src');
            //var alteredURL = removeParams(originalURL);
            
            //var imgHeight = $(window).height() - 70;
            
            // and adds new params fitting the zoom popup       
            //var params = {
            //  img: alteredURL+'sh=' + imgHeight + '&sm=fit',
            //  title: image.attr('title')
            //};
            //var imageurl = util.appendParamsToUrl(Urls.zoomImage, params);
            //dialog.open({
            //  url: imageurl,
            //  options: {
            //      callback :  function () {
            //          //envokeZoom();
            //          $('.ui-widget-overlay').click(function(){
            //              dialog.close();
            //              return false;
            //          });
            //      },
            //      dialogClass: 'image-modal'
            //  }
            //});
        });
    

    and btw your code will execute enterFullscreen method even while fullscreen, which possibly could cause the issue. Checking for isFullscreen might help.

  12. 12 Posted by nbj on 29 May, 2017 07:02 AM

    nbj's Avatar

    As of now the code is:

    $('.royalSlider').on('click.exitfullscreen','.rsSlide', function(event) {
                        event.preventDefault();
                        if(!$('.royalSlider').data('royalSlider').dragSuccess && slider.isFullscreen){
                            slider.exitFullscreen();
                        }
                        setTimeout(function(){
                            slider.updateSliderSize(true);
                        }, 600);
                        clearTimeout();
                    });
    

    And it's still the same issue.

  13. Support Staff 13 Posted by Dmitry Semenov on 29 May, 2017 02:03 PM

    Dmitry Semenov's Avatar
    • Set option navigateByClick to false.
    • Please elaborate why do you call updateSliderSize method with 600ms delay and why do you call empty clearTimeout afterwards.
    • There is nothing special in fullscreen button itself, take a look how it's coded - https://gist.github.com/dimsemenov/519c1f099e2ae355237ab4cf503d7ff6... , you may do the same for the images.
  14. 14 Posted by nbj on 29 May, 2017 02:22 PM

    nbj's Avatar

    Still not working. The reason i'm updating the slider is because you wrote:

    Make sure that the update size method that you trigger actually fires after the page is collapsed, exitFullscreen may fire earlier.

    And you're also the one who told me to clearTimeout after.
    I'm trying everything, and nothing works. I even tried triggering the button click on slide click. Didn't work either.

  15. Support Staff 15 Posted by Dmitry Semenov on 29 May, 2017 02:31 PM

    Dmitry Semenov's Avatar

    I still see navigateByClick set to true, at least on this page https://development-store-masai.demandware.net/s/masai/da_DK/bluser...

    The reason i'm updating the slider is because you wrote:

    Oh, I was referring to another piece of code, so nevermind. And on an unrelated note - to clear timeout you need to pass its ID, you can't just do clearTimeout() without passing an argument.

  16. 16 Posted by nbj on 29 May, 2017 02:34 PM

    nbj's Avatar

    Yeah, i'm coding on a local environment, so the code won't be completely updated there.

  17. 17 Posted by nbj on 06 Jun, 2017 11:02 AM

    nbj's Avatar

    Have you figured out a fix yet? Nothing have worked yet.

  18. Support Staff 18 Posted by Dmitry Semenov on 06 Jun, 2017 02:18 PM

    Dmitry Semenov's Avatar

    Oh, I marked the discussion as "read", as I thought that you'll post link when you'll publish changes from the local environment.

    Can you please update live version? navigateByClick option is still on, at least on this page -
    https://development-store-masai.demandware.net/s/masai/da_DK/bluser...

  19. 19 Posted by nbj on 07 Jun, 2017 06:56 AM

    nbj's Avatar

    It should be updated now.

  20. Support Staff 20 Posted by Dmitry Semenov on 07 Jun, 2017 08:50 AM

    Dmitry Semenov's Avatar

    You've set the option to string "false", try setting to to boolean value - false.

  21. 21 Posted by nbj on 08 Jun, 2017 07:41 AM

    nbj's Avatar

    Still doesn't make a difference.

  22. Support Staff 22 Posted by Dmitry Semenov on 08 Jun, 2017 08:58 PM

    Dmitry Semenov's Avatar

    I guess, you haven't updated the live version yet, as I still see the option set to String.

    You might want to check your backend code that generates image sizes, as sometimes it returns the small image for data-rsBigImg attribute (attached screenshot). Also, don't really understand why do you separate exitFullscreen and enter in different files - there is only "enter" in app.js

    I'm not sure if I'll be able to assist without a reduced test case from you, like this one http://jsfiddle.net/DmitrySemenov/x9c989v0/

  23. 23 Posted by nbj on 09 Jun, 2017 12:19 PM

    nbj's Avatar

    I figured it out, doing your fiddle. :) The reason it works everywhere else, even though the rsbigimg looks to be smaller is because of this code:

    $('.royalSlider .rsImg.primary-image').each(function() {
      var originalURL = $(this).data("rsbigimg");
      var imgHeight = $(window).height()-70;
      var tostr = "?sw=" + imgHeight + "&sh=" + imgHeight + "&sm=fit";
      var newstrURL = originalURL.replace(/\?sw=\d+&sh=\d+&sm=fit/, tostr);
      $(this).data("rsbigimg", newstrURL);
      $(this).attr("data-rsbigimg", newstrURL);
    });
    
    So i'm calling it again on enter fullscreen, and it works. :)
  24. nbj closed this discussion on 19 Jun, 2017 01:05 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