Link to Full screen iOS

  • So currently I have a link below my images where the image loads directly and therefore it is possible to get it working as full screen on iOS devices, as its not possible to have a full screen function inside a frame.

    Then I started thinking, when iOS device is used could it be possible to have the full screen button as a direct link to the whole image, just as I have a link now below. But of course keep the full screen button as is for desktop and Android devices that support full screen.

    Example here.

    https://olihar.com/panorama/hnukar-sunset/

  • Hi,

    just include the new 'ios_iframe_fullscreen.xml' file anywhere in the your xml.

    It will add a 'fake' fullscreen-mode support especially for iOS and especially for running inside in iframe.

    When entering that fullscreen-mode, the viewer will redirect the page to the inner iframe page and so let the pano appear more 'fullscreen'.

    Best regards,
    Klaus

  • Interesting, I had not noticed, I just tried it and it works with the right click method. Not really what I had in mind but it works, now I just need to include this as a button in the menu items below.

    Would it not be a good idea to include this as default with the themes as a button that only displays for iOS devices (Aka iPhones Full screen) instead of it being no button.

  • from the xml file, it seemed it regsiter:

    krpano.registerattribute("fullscreen"...)


    In order to trigger it fullscreen, shall we just call

    krpano.setattribute("fullscreen", true) ?

  • Hello everyone. I have implemented the feature and it works, neatly with a button provided by the skin too. Problem that remains for me is, that I have found no way to neatly exit 'pseudofullscreen'.
    My first route was to use

    Code
    <script>
    function goBack() {
      window.history.back();
    }
    </script>

    Half way through the implementation it dawned on my, that if I set a boolean to control, the behaviour of the button by means of a case statement I wont get anywhere far, as the booleans value will be default again, by the time the new 'pseudofullscreen' has loaded. (The boolean would basically be set 1 if on a ios device within iframe the user toggled fullscreen on).

    Does anyone have an idea how to provide a way to exit pseudofullscreen and preferably even control the buttons appearance ?
    In the worst case I am planning to use two buttons, one to enter and one to exit fullscreen.

  • I have now added my least favourable option:

    Code
    <layer name="skin_btn_fs_close"	style="skin_base|skin_glow" crop="64|576|64|64" align="right" x="154" y="0" scale="0.5" devices="ios.and.iframe" onclick="jscall('window.history.back();')"  />

    And as expected it messes up the experience, if someone for example finds the page with the iframe through websearch and for some reason clicks the new button first... they'll get back to their websearch. i'll need a way to rectify this issue.

    On one part it doesn't behave as expected... I thought I had it working at first... since adding

    Code
    devices="ios.and.iframe"

    the new button disappears when viewing in pseudofullscreen on ios in safari... if I remove it it works but obviously on every other device too. It will work when only specifying ios. So iframe is the culprit, it seems it's not being detected to be an iframe. Indeed the URL is the actual S3 address, which I believe is an issue exclusive to my testing environment.

    Next I will try making use of JS objects window.location or window.history to control behavior and style of the button. This might allow me to have a single button that always works as expected... learning JS as I go, awesome *smile*

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!