Topic: Mobile gallery thumbnail view

Hi, I am trying to configure the way my galleries look in mobile viewer.

This is what I see when I open my gallery:
http://skyredoubt.com/temp/photo%201.PNG
http://skyredoubt.com/temp/photo.PNG
while this is how SimpleViewer demo looks:
http://skyredoubt.com/temp/photo%202.PNG

As you can see, my thumbnails are all displayed on one page as a square grid with all the mobile buttons such as navigation arrows and full screen all very small. While the SimpleViewer demo displays thumbs in large 4x2 grid with the navigation overlays also pretty large. I like this way better.
I looked at my config options and could not find what could cause the difference.

Would appreciate any help.

My preset XML:
http://skyredoubt.com/galleries/galleryPreset.xml
An example of gallery xml:
http://skyredoubt.com/galleries/2002.xml
My embedding code:

        <script type="text/javascript" src="includes/simpleviewer_213/web/svcore/js/simpleviewer.js"></script>
        <!--START SIMPLEVIEWER EMBED.-->        
        <script type="text/javascript">
        var flashvars = {};
        flashvars.presetURL="galleries/galleryPreset.xml";        
        flashvars.galleryURL = 'galleries/2002.xml';
        $(document).ready(function () {
        <? echo "SV.simpleviewer.load('sv-container2','100%', '100%', '000000', true, flashvars);\n";?>
        });
        </script>
        <div id="sv-container2">
        </div>
        <!-- END SIMPLEVIEWER EMBED -->    

I don't know whether my style sheet might be to blame, so, I include it just in case:
http://skyredoubt.com/skyredoubtstyle.css

Re: Mobile gallery thumbnail view

If you view the gallery itself by going to http://skyredoubt.com/galleries/gallery … lery=faces on your iPod, then you should see that the thumbnails are displayed as expected in a block of 2 x 4.
On the page into which the gallery is embedded, the gallery is inside an <iframe> which, in turn, is inside a <td> in a table.
This <td> has a fixed height (defined by an absolute pixel value rather than a percentage) and the gallery will, therefore, not be able to dynamically resize vertically.
This can be confirmed by opening up the page in a standard browser on your computer. If you resize the window vertically, the thumbnails do not rearrange themselves and the grid will be cropped when the windows becomes too small. However, if you resize the window horizontally, the thumbnails do rearrange themselves to accommodate the available space.

Steven Speirs
SimpleViewer Support Team.

Re: Mobile gallery thumbnail view

Steven, thanks for the reply. However, on my mobile browser the page should not be displayed in an iframe and inside a table, as I have a PHP code that determines whether the browser is mobile or not and displays the page in two different ways depending on that. The table is used only on non-mobile browsers.
I confirmed that examining the source of the displayed page on my mobile Safari. Here is the code as mobile Safari sees it:

<head>

<link rel="stylesheet" type="text/css" href="skyredoubtstyle.css" />
<link rel="stylesheet" type="text/css" href="skyredoubtstyleMobile.css" />  

<title>1993-1998 | skyredoubt.com</title><meta name="description" content="Photography and graphic art by Peter Drubetskoy">
<meta name="key words" CONTENT="photography, drawing, painting, images, gallery, skyredoubt, peter drubetskoy, piotr drubetskoy, pioter drubetskoy, art, photos, pictures, graphics, graphic art"><meta name="key words" content="photography, drawing, painting, images, gallery, skyredoubt, peter drubetskoy, piotr drubetskoy, pioter drubetskoy, art, photos, photo, pictures, graphics, graphic art">
<meta http=""-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="emailhide.js"></script>
<script type="text/javascript" src="togglemenus.js"></script>
<script type="text/javascript" src="menucontentsreg.js"></script>
<script type="text/javascript" src="pageparts.js"></script>

<style type="text/css">
  #overlay {
    position: absolute;
    top: 12px;
    left: 10px;
    z-index: 99;
  }
</style>

</head>
<body>

    <div id="overlay">
      <a href="../graphics.html"><img src="../images/LINKS/back.gif" alt="Back"></a>    </div>
    <script type="text/javascript" src="includes/simpleviewer_213/web/svcore/js/simpleviewer.js"></script>
        <!--START SIMPLEVIEWER EMBED.-->    
    <script type="text/javascript">
    var flashvars = {};
    flashvars.presetURL="galleries/galleryPreset.xml";    
    flashvars.galleryURL = 'galleries/1993-1998.xml';
    $(document).ready(function () {
    SV.simpleviewer.load('sv-container2','100%', '100%', '000000', true, flashvars);
    });
    </script>
    <div id="sv-container2">
    </div>
    <!-- END SIMPLEVIEWER EMBED -->    
  
</body>
</html>

It really seems to me that the SimpleViewer demo example opens by default in Full Screen view, while mine isn't, but I cannot see why that would be the case. Thanks again for your valuable time and patience.

Re: Mobile gallery thumbnail view

It really seems to me that the SimpleViewer demo example opens by default in Full Screen view

The demo gallery has dimensions of 100% by 100% which takes up the entire browser window and so the Full Window mode button is disabled (as there is no difference between the default display mode and Full Window mode).

Try temporarily removing the references to the external CSS and JavaScript files and see how the gallery looks.
If it looks OK, then introduce them back into the page one by one to see to see which one is interfering with the display.

Also, if the code you posted is the entire page that Mobile Safari see, then there should be a Doctype Declaration and an opening <html> tag at the top which are currently missing.

Also, although you have the line:

<script type="text/javascript" src="includes/simpleviewer_213/web/svcore/js/simpleviewer.js"></script>

... (which implies you are using v2.1.3) you also have the embedding code line:

SV.simpleviewer.load('sv-container2','100%', '100%', '000000', true, flashvars);

... the syntax of which predates v2.1.3.
Make sure that you are using the latest version (there was a hotfix update to the v2.1.3 package a while ago) and update the embedding code to:

simpleviewer.ready(function () {
simpleviewer.load('sv-container2','100%', '100%', '000000', true, flashvars);
});
Steven Speirs
SimpleViewer Support Team.

Re: Mobile gallery thumbnail view

Steven, you were right!
The css caused the issue. I simply removed it, since I don't need css for the mobile page.
Thanks a lot for your help!