Fullscreen gallery on Safari mobile versione (Iphone, Ipad...)

fra.cigna's Avatar

fra.cigna

20 Feb, 2018 03:16 PM

Hello Dmitry
if it's possible, I need your help!

Everything works fine...Chrome, Firefox in dekstop and mobile version, OK Safari desktop ver also,
BUT many people told me the gallery has a problem on Iphone, Ipad with Safari browser.
I can't understand!....and unfortunately i do not have an Iphone to do some tests/debug :(

So, attached you can see the bug, kindly sent me by a user with Iphone 6s.
The bug appears at the closing of the fullcreen gallery...The gallery remains hanging on Safari mobile (not on Chrome mobile version)

Here my implementation:
- At the top of the page there is a script Async containing jQuery v2.1.0 (minify ver) and royalslider.js (minify ver)
<script type="text/javascript" src="<?php echo $root_web;?>/js/script_async.js" async></script>

- Recovered the data by one Api (ajax call), I build dynamically 4 galleries, here is one:
<div id="gallery_panorama" class="hidden royalSlider rsDefault">
<a class="rsImg" data-rsbigimg="'+foto+'&size=900x600" href="'+foto+'&size=900x600">'+didascaliaFoto+'<img width="100" height="70" class="rsTmb" src="'+foto+'&size=100x70" alt="'+didascaliaFoto+'"></a>
</div>
As you see, i hid the gallery and show this only fullscreen mode

- after this, inside a Ready Jquery event ($(document).ready(function()) i do:
$('.royalSlider').royalSlider({
    fullscreen: {
        enabled: true,
        nativeFS: true
      },
      controlNavigation: 'thumbnails',
      autoScaleSlider: true,
      loop: true,
      imageScaleMode: 'fit-if-smaller',
      navigateByClick: true,
      numImagesToPreload:2,
      arrowsNav:true,
      arrowsNavAutoHide: true,
      arrowsNavHideOnTouch: true,
      keyboardNavEnabled: true,
      fadeinLoadedSlide: true,
      globalCaption: false,
      globalCaptionInside: false,
      thumbs: {
        appendSpan: true,
        firstMargin: true,
        paddingBottom: 4
      }
});

and for every gallery
$('.divImgPanorama').on('click', function(){
$("#gallery_panorama").removeClass('hidden');
var positionScrollTop = $(window).scrollTop();

$(".rsNav").css('display', 'block');
var slider = $('#gallery_panorama').data('royalSlider');
slider.enterFullscreen();

slider.ev.on('rsExitFullscreen', function() {
slider.exitFullscreen();
$("#gallery_panorama").addClass('hidden');
$(".rsNav").css('display', 'none');
   $(".rsNav").css('width', '0 !important');
   $(".rsNav").css('height', '0 !important');
   $(window).scrollTop(positionScrollTop);
});
});

On click i remove the hidden class ($("#gallery_panorama").removeClass('hidden');)
and with the scrollTop() function i store the position of scroll to use it in rsExitFullscreen event.
After call slider.exitFullscreen(); i add hidden class to gallery ($("#gallery_panorama").addClass('hidden'))
I see that scrollTop() creates problems on Safari mobile but removing it nothing changes!

Maybe i'm wrong somewhere but why this problem only appears on Safari?!?

Can you give me some help?
Sorry for my bad english!

Best regards
Francesco

  1. Support Staff 1 Posted by Dmitry Semenov on 20 Feb, 2018 04:45 PM

    Dmitry Semenov's Avatar

    Hello,

    You have an infinite loop, you're calling exitfullscreen method in exitfullscreen event.

    On unrelated note, if you're using slider just "in fullscreen", skip the fullscreen option entirely and stretch the slider to 100% width/height of window via CSS ( position:fixed;left:0;top:0;width:100%;height:100% ...).

  2. 2 Posted by fra.cigna on 20 Feb, 2018 06:11 PM

    fra.cigna's Avatar

    Thank you
    OK i had infinite loop :)

    Anyway there aren't problem in Chrome or Firefox....

    I think is not immediate skip the fullscreen option..i have to create the exit fullscreen button, manage many class rsfull..it's not easy for me..

    Do you have a post about it?
    otherwise thanks anyway

    Regards
    Francesco

  3. Support Staff 3 Posted by Dmitry Semenov on 20 Feb, 2018 08:26 PM

    Dmitry Semenov's Avatar

    No, I don't have a guide specifically for that. This one might help though http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str... check jsfiddle example.

  4. 4 Posted by fra.cigna on 21 Feb, 2018 06:43 PM

    fra.cigna's Avatar

    Solved in this way with fullscreen option:

    $('.royalSlider').royalSlider({
        fullscreen: {
            enabled: true,
            nativeFS: true
          },
          controlNavigation: 'thumbnails',
          autoScaleSlider: true,
          loop: true,
          imageScaleMode: 'fit-if-smaller',
          navigateByClick: true,
          numImagesToPreload:2,
          arrowsNav:true,
          arrowsNavAutoHide: true,
          arrowsNavHideOnTouch: true,
          keyboardNavEnabled: true,
          fadeinLoadedSlide: true,
          globalCaption: false,
          globalCaptionInside: false,
          thumbs: {
            appendSpan: true,
            firstMargin: true,
            paddingBottom: 4
          }
    });

    $('.rsFullscreenBtn').on('click', function(){
       $("#gallery_panorama").addClass('hidden');
    });

    $('.divImgPanorama').on('click', function(){
    $("#gallery_panorama").removeClass('hidden');

    var positionScrollTop = $(window).scrollTop();

    $(".rsNav").css('display', 'block');
    var slider = $('#gallery_panorama').data('royalSlider');
    slider.enterFullscreen();

    slider.ev.on('rsExitFullscreen', function() {
       $("#gallery_panorama").addClass('hidden');
    });
    });

  5. fra.cigna closed this discussion on 21 Feb, 2018 06:45 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