Safari ios15 fullscreen thumbnails missing

andrey.elanskiy's Avatar

andrey.elanskiy

29 Sep, 2021 09:30 PM

Hi Dim. On ios15 in the fullscreen mode, the thumbnails are not visible if the addressbar is not shown before you enter the fullscreen. The thumbnails are visible, if the addressbar is visible as well before the FS mode.
Check your page https://dimsemenov.com/plugins/royal-slider/gallery/ on iphone.

  1. 1 Posted by andrey.elanskiy on 29 Sep, 2021 09:31 PM

    andrey.elanskiy's Avatar

    Easy fix possible?

  2. Support Staff 2 Posted by Dmitry Semenov on 06 Oct, 2021 06:44 PM

    Dmitry Semenov's Avatar

    Hello,

    Sorry, I've missed your thread. I haven't figured out a way on how to fix this yet, aside from hiding page content when fullscreen mode is entered, for example:

    slider.ev.on('rsEnterFullscreen', function() {
      document.documentElement.classlist.add('rs-fs-open');
    });
    
    slider.ev.on('rsExitFullscreen', function() {
      document.documentElement.classlist.remove('rs-fs-open');
    });
    

    and then use CSS to hide content via .rs-fs-open.

    You may also disable the fullscreen feature on mobile or just on iOS:

    /iPhone|iPad|iPod/i.test(window.navigator.userAgent)
    
  3. 3 Posted by andrey.elanskiy on 06 Oct, 2021 07:50 PM

    andrey.elanskiy's Avatar

    EDIT AFTER I WROTE THE BELOW: sorry the first part below is about PHOTOSWIPE which has the same problem (discussed in the photoswipe forum).

    I found that I need resize the slider after entering the fullscreen and make some tweaks on CSS as follows:

    jQuery('.rsNav').after($('.rsGCaption'));
    var slider = $(".royalSlider").data('royalSlider');

    slider.ev.on('rsEnterFullscreen', function () {
         jQuery(window).trigger('resize');
         });

    slider.ev.on('rsExitFullscreen', function () {
          jQuery('.rsGCaption').attr("style", "height: auto;");
          jQuery(window).trigger('resize');
    });

    rsGCaption has much text so I have made it to fit the rest of the screen and scroll.

    CSS:

    .royalSlider.rsFullscreen .rsOverflow {
      max-width: 1920px;
      max-height: 1280px;
      float: none !important;
      margin: 0 auto !important;
    }

    .royalSlider.rsFullscreen .rsImg {
      max-width: 1920px;
      max-height: 1280px;
    }

    .royalSlider.rsFullscreen .rsGCaption {
      overflow-y: auto !important;
      margin: 0 auto !important;
      float: none !important;
    }

    .royalSlider.rsFullscreen .rsGCaption {
      max-width: 880px;
      padding-left: 1.3rem;
      padding-right: 1.3rem;
    }

    ********* original input on photoswipe (i thought it was about royalslider)***********
    Yes, the way I solved is by hiding the page content between the div.pswp, otherwise if the pswp block is hidden, the screen is blank.
    Then I use the following:

    gallery.listen('initialZoomIn', function () {
                document.getElementById('myHide').style.display = "none";
                //between these two (myHide and footer) I have the PSWP block
                document.getElementsByTagName('footer')[0].style.display = "none";
                gallery.updateSize(true);
            });

    gallery.listen('close', function () {
               document.getElementById('myHide').style.display = "block";
                document.getElementsByTagName('footer')[0].style.display = "block";
            });

     gallery.listen('destroy', function () {
                 gallery.updateSize(true);
            });

    I found that I need to update the size as well.

    The thumbnails are visible in this case, but if the address bar is minimized on entering the fullscreen, then there is a gap in the size of the address bar between the bottom of the screen and bottom of picture. But that's ok.

  4. 4 Posted by andrey.elanskiy on 06 Oct, 2021 07:56 PM

    andrey.elanskiy's Avatar

    Would still be great to have a possibility to zoom in the fullscreen mode if only photos are used. I read that you deliberately avoided that but anyway.

    So I have to use photoswipe which opens on another page if user wants to see full pictures.

  5. 5 Posted by andrey.elanskiy on 06 Oct, 2021 08:19 PM

    andrey.elanskiy's Avatar

    RoyalSlider fullscreen, both cases

  6. Support Staff 6 Posted by Dmitry Semenov on 07 Oct, 2021 09:58 AM

    Dmitry Semenov's Avatar

    I don't think programmatic zoom will be ever added to the RoyalSlider, it's a very complicated feature. So I'd recommend using only PhotoSwipe if you need zoom,

    If you also need some inline gallery before fullscreen mode is entered - consider a lighter alternative like mostly CSS-based overflow-x:scroll scroller, nowadays browsers support even scroll snapping for it.

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