• Registered: 2014-01-30
  • Posts: 12

Topic: mobile fullscreen

Hi there,

This is my last question, I hope :-)

Is the possible to run sv mobile version on fullscreen?
My sv is configured not to show thumbnails only photos, and always show address bar in gallery view, which is annoying because it is mobile so the screen is small. Other sites hide the address bar.

Here is link m.pawelkordys.pl/SriLanka

  • Registered: 2008-07-06
  • Posts: 6,331

Re: mobile fullscreen

Whether your mobile browser's address bar is hidden or not may depend on the browser itself (and its version number).
When I view your gallery in Mobile Safari on an iPod Touch 4 running iOS 6.1.5, the browser's address bar is hidden.
However, Apple made changes to the way that the address bar can be hidden when they introduced iOS 7 and SimpleViewer has not been updated since iOS 7 was released so if you are using an iOS 7 device, the address bar may not be hidden.

You might like to take a look at another of our image viewers: Juicebox.
Juicebox is a HTML 5 image viewer which does not use or rely on Adobe Flash Player at all.
It is more configurable than the Mobile Player within SimpleViewer and has recently had an update relating to gallery sizing on iOS 7. Please see the Version History for details.

For more information on the differences between SimpleViewer and Juicebox, please see this SimpleViewer news article.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-01-30
  • Posts: 12

Re: mobile fullscreen

It's good to hear, address bar is hidden, I haven't got an i(pod|pad|phone) to test.

I'm using android and the address bar isn't hidden.

Hmm.. I will take a look at juicebox, but you know... I'm already spent ~$45 and think is enough for gallery engine.

  • Registered: 2014-01-30
  • Posts: 12

Re: mobile fullscreen

I read a little about address bar in android.

The problem is, android native browser reports innerheight with address bar shown, so when simpleviewer is fired up with 100% height it is to small to scroll in order to hide this bar.

I tried to put in simpleviewer.load function window.innerheight+32px as height and it works, but... you cant rotate the screen after first image is displayed, because after screen rotation sv still is old height :-( and also new button "fullscreen" appears.

We can catch onrotate event to set new height, but smpleviewer.js is coded so i don't know if it is a function for set new height.

Is there that function?

or I have to wait for an upgrade?

  • Registered: 2008-07-06
  • Posts: 6,331

Re: mobile fullscreen

If you listen out for the window.onorientationchange event, you could then set a new height for the gallery's container (the 'sv-container' div) using JavaScript and CSS.
Otherwise, you could set new dimensions for your gallery using the SimpleViewer-Pro API setSize( width: int, height: int ) method.

Here is an example of how to use the setSize( width: int, height: int ) method.
First, create a sample gallery using svBuilder-Pro and then replace the gallery's 'index.html' page with the following code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer-Pro Gallery</title>
    <style type="text/css">
        body, html {
            background-color: #ffffff;
            height: 100%;
        }
    </style>
</head>
<body>
    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        var svAPI;

        function svComplete() {
            svAPI = document.getElementById("svInstance");
        }

        function setSmall() {
            svAPI.setSize("600", "400");
        }

        function setLarge() {
            svAPI.setSize("900", "600");
        }

        var flashvars = {};
        flashvars.galleryURL = "gallery.xml";
        flashvars.enableAPI = "true";

        var params = {};
        params.allowfullscreen = true;
        params.allowscriptaccess = "always";
        params.bgcolor = "ffffff";

        var attributes = {};
        attributes.id = "svInstance";
        attributes.name = "svInstance";

        simpleviewer.ready(function() {
            svAPI = simpleviewer.load('sv-container', '100%', '100%', 'ffffff', false, flashvars, params, attributes);
        });
    </script>
    <div id="api">
        <a href="#" onclick="javascript: setSmall(); return false;">Set gallery size to 600px x 400px using SimpleViewer-API <strong>setSize( width: int, height: int )</strong> Method.</a>
        <br />
        <a href="#" onclick="javascript: setLarge(); return false;">Set gallery size to 900px x 600px using SimpleViewer-API <strong>setSize( width: int, height: int )</strong> Method.</a>
    </div>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->
</body>
</html>

I hope this points you in the right direction.
Hopefully you will be able to use similar code in your own galleries to achieve your goal.

Gallery sizing issues on Android devices have been logged as a bug and should hopefully be fixed in the next version of SimpleViewer. However, I do not know when this might be.

If you would like to be informed when new versions are released, please subscribe to our blog's RSS feed or follow us on Twitter @simpleviewer.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2014-01-30
  • Posts: 12

Re: mobile fullscreen

Hi, i just read your answer, thank you! It's really good think that you are listening to users and answer. If I would like to buy another gallery/web design engine, I will go to simpleviewer.net for sure.

For now I solved my problem, but it's hack :-)

So lets play the game:

1) I decompressed simpleviewer.js
2) I realized, You have a function which differs "smallandroid" than big (small is defined as: 

Math.max(screen.width, screen.height) < 800

hmm, I think this isn't good because in this times my tablet have 1280 long edge and phone also, but the trick is the density, effective resolution for phone is 640.

3) In big android You don't hide the address bar.
4) In small You hide it, and also show a crop instead a full photo.

5) So I decided, for me better solution is to hide addressbar everytime in android, and changed the function:
isSmallAndroid().

6) ...but i was not finish, in small android you return screen.height from the function adjustHeight4Devices, and it is not correct in this times because of density, so I changed this function (It's my own hack):

                var c = getAndroidVer();
                if (c >= 4) {
                    if (screen.width > $(window).width()) {
                        var e = screen.width / $(window).width()
                        return screen.height / e
                    } else {
                        return screen.height
                    }

instead of 

            if (isSmallAndroid()) {
                var c = getAndroidVer();
                if (c >= 4) {
                    return screen.height * 1.25
                }

I know it is not ideal solution, If I have some time in the future, I'll think about better  :)