Topic: Mobile version cuts the bottom half of the photo off

Hello at Simple Viewer.

First, thank you for your amazing tool.  It really is awesome.

I have a little problem when viewing my site on the iPhone.  It may be an sv issue but it may very well be related to my web software also.  In this case I am using an iFrame in a page built with iWeb on the Mac.

My slide shows look great on any computer.  Perfect.
The problem is when I view them on the iPhone.  The bottom half or third of the image gets cut off.  View this gallery for example:
http://www.bostruyephotos.com/BSPWeb/Pinups.html

Would anyone know how to fix this?

Thank you

Bo

Re: Mobile version cuts the bottom half of the photo off

This might have something to do with the way iWeb structures the page.
The <iframe> is not actually in the 'Pinups.html' page itself. iWeb includes a separate page (containing the <iframe>) via a JavaScript widget. I do not know why Mobile Safari renders the page differently to other browsers (truncating the images) so I think some trial and error may be called for to find a solution.
Here are a few things to try (try each one individually rather than all at once):
(1) Replace the <iframe> with the baseURL embedding code method found here: http://simpleviewer.net/simpleviewer/su … l#external
(2) Change your <iframe> code from:

<iframe src=
"http://www.bostruyephotos.com/pinups_sv/index.html"
style="width:1000px; height:1000px;
border-width:0px;
border-color:#990033; 
border-style:solid;"
allowtransparency="true";
scrolling="auto" >
</iframe>

... to:

<iframe src= "http://www.bostruyephotos.com/pinups_sv/index.html" width="1000" height="1000" frameborder="0"></iframe>

(3) Try enclosing your <iframe> in a <div> of the same dimensions.

Steven Speirs
SimpleViewer Support Team.

Re: Mobile version cuts the bottom half of the photo off

Great info!  Thank you Stephen,

I had a feeling it had more to do with iWeb than sv and this confirms it.  I will try your suggestions when I get home tonight.

Bo

Re: Mobile version cuts the bottom half of the photo off

I tried your methods 1 and 2.

Method 2 did not change anything.  It was ok on full size computer but cropped on iPhone

Method 1 caused the photos to disappear completely.  That version is still published now if you want to double check it.

Method 3...  I am not sure how to do that.  What is the code to "enclose your <iframe> in a <div> of the same dimensions."

Thank you Steven!

Bo

Re: Mobile version cuts the bottom half of the photo off

Method 1 caused the photos to disappear completely.  That version is still published now if you want to double check it.

I notice that you are using SimpleViewer Pro v2.1.1 and the embedding code you are currently using is in a format that only the latest version of SimpleViewer (v2.1.3) recognises.
Either:
(1) Upgrade to v2.1.3 (see here for details) and then replace the 'svcore' folder in your gallery with the 'svcore' folder from the SimpleViewer Pro download package ('simpleviewer_pro_213/web/svcore/'), or...
(2) Replace your current embedding code with the following which will work with v2.1.1:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://www.bostruyephotos.com/pinups_sv/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "http://www.bostruyephotos.com/pinups_sv/";
jQuery(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

Method 3...  I am not sure how to do that.  What is the code to "enclose your <iframe> in a <div> of the same dimensions."

Try enclosing the <iframe> in a <div> as follows.
Make the <div>'s dimensions the size you wish and change the <iframe>'s dimensions to be 100% x 100% (to completely fill the <div>).

<div id="iframe_wrapper" style="width: 1000px; height: 1000px;">
    <iframe src= "http://www.bostruyephotos.com/pinups_sv/index.html" width="100%" height="100%" frameborder="0"></iframe>
</div>

However, I would persevere with Method 1 and upgrade your gallery to v2.1.3 (by swapping the 'svcore' folder and not having to change your current embedding code).
This should make your gallery reappear and v2.1.3 also includes several bugfixes since v2.1.1 which might also help with your original issue.

Steven Speirs
SimpleViewer Support Team.

Re: Mobile version cuts the bottom half of the photo off

Thanks Steven,

Yes, I created these galleries a few months ago and 2.1.1 was the latest at the time.  So I definitely need and want to upgrade asap.  I will do that tonight and retry method 1.

Bo

Re: Mobile version cuts the bottom half of the photo off

Hi,

Ive been trying to figure a way to make this work, and the only i could was by using page redirection which i found on another forum. All the method above dont work

<script type="text/javascript">
parent.location.replace('http://www.simpleviewer.com/album/index.html');
</script>

Im really bad with code.

I also tried this using svBuilder

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "transparent", true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

And i get Gallery XML not found

Is there than i can do a redirection in within a frame in iweb ?

Thanks

Re: Mobile version cuts the bottom half of the photo off

@smailpouri

Is there than i can do a redirection in within a frame in iweb ?

Have you tried adding your redirection JavaScript code to the page being loaded into the <iframe>?

Try the following:
(1) Create your SimpleViewer Pro gallery with sv-Builder Pro: http://simpleviewer.net/simpleviewer/pr … uilderpro/
(2) Upload the entire gallery folder (not just the contents) to your web server with an FTP program such as Filezilla: http://filezilla-project.org/
(3) Embed the gallery using one of the two methods described here: http://simpleviewer.net/simpleviewer/su … l#external

And i get Gallery XML not found

Please see this FAQ for details: http://simpleviewer.net/simpleviewer/su … #trouble_6
If you continue to experience difficulties, please post the URL to your gallery so that we can take a look.

Steven Speirs
SimpleViewer Support Team.

Re: Mobile version cuts the bottom half of the photo off

Hi Steven, and thanks for your quick response.

Have you tried adding your redirection JavaScript code to the page being loaded into the <iframe>?

I don't know how to do that, what would the code look like ?

Try the following:
(1) Create your SimpleViewer Pro gallery with sv-Builder Pro: http://simpleviewer.net/simpleviewer/pr … uilderpro/
(2) Upload the entire gallery folder (not just the contents) to your web server with an FTP program such as Filezilla: http://filezilla-project.org/
(3) Embed the gallery using one of the two methods described here: http://simpleviewer.net/simpleviewer/su … l#external

I tried all those and already check the links for possible solution, I realize that I'm in the Pro section, but I'm using the free version is there a difference ? I tried with svbuilder v2.1.3 and Lightroom v3.4.1, and i use CyberDuck to transfer the files

Here the link to the website.

jenniferlynnbaker.comuf.com

On my iPhone 4 (Mobile Safari) (IOS 4.3.1)

The page http://jenniferlynnbaker.comuf.com/JLB/ … ction.html:
Probably one of the best solution for now, works on the iPhone, can't slide the picture but i can press the arrow to change to the next one, it works fully if i click on the Full Screen Mode button, then i can slide or press the arrow to the next picture. The only thing is that we loose the top MENU of the web page, so i have to use PREVIOUS PAGE button to go back to the actual website.
Maybe if there is a way to go to Full Screen mode right after the redirection for iPone mode that would be good.

The page http://jenniferlynnbaker.comuf.com/JLB/ … seURL.html:
On the iPhone, Pictures are cropped and and they are always are the bottom of the page layout, i can slide or press the arrow. Also it makes the page hard to slide UP or DOWN on the page. NOT GOOD (No fullscreen Button)

The page http://jenniferlynnbaker.comuf.com/JLB/ … Frame.html:
on the iPhone, same as the BaseURL page but this time the layout set on iWeb is respected, which makes it easier to Navigate trough the website. (No FullScreen Button)

Thanks.

Re: Mobile version cuts the bottom half of the photo off

Perhaps this has something to do with the fact that the embedding code is not on the main page itself but is on its own page and is included in the main page via a JavaScript widget (whether using the baseURL or Iframe method).
Taking your 'Test Using BaseURL' page as an example, iWeb puts the embedding code on a page of its own (http://jenniferlynnbaker.comuf.com/JLB/ … arkup.html) and this accounts for there being no Fullscreen button. The gallery's dimensions are 100% x 100% and the 'sv-container' <div> is the only container on the page so, as far as SimpleViewer is concerned, it is already Fullscreen (it cannot go any larger as it already fills the page) and thus the Fullscreen button is hidden.
One thing to try might be to give your gallery absolute dimensions in pixel values rather than 100% x 100%.
It may not be an ideal solution but it might give us some more information to work with.
The 'Test Using BaseURL' gallery seems to work OK in Safari 5.1 on my PC with Flash disabled (ie. images are not cropped and are scrollable if the browser window is too small) but not in Mobile Safari (where the images are cropped and not scrollable). The problem seems to be unique to Mobile Safari. Try giving your gallery absolute dimensions in pixel values and see if the images are scrollable in Mobile Safari.

Steven Speirs
SimpleViewer Support Team.

Re: Mobile version cuts the bottom half of the photo off

Try giving your gallery absolute dimensions in pixel values and see if the images are scrollable in Mobile Safari.

I would i just don't know how  neutral , I'm just don't know code, i can read it a little but that pretty much all. Understanding is another story  hmm

Also i was trying to create a Multiple Gallerie page, but i could not manage to make it work.

http://jenniferlynnbaker.comuf.com/JLB/ … eries.html

thank you

Re: Mobile version cuts the bottom half of the photo off

Jennifer.

In iWeb, open the Inspector.
The first icon on the  left is called Layout (I think...  I'm at work so I don't have it in front of me)
IN there, you will see two tabs.  In one of them you will see the dimensions.  The height maybe be set to 0.  This means that it will auto size to fit your _sv gallery.  Try setting that to 100 or so.  This will add some room below the _sv images.  I'm curious to see if that would make a difference on the iPhone.

A better way would be to find out how to set it to a fixed number of pixels as Steven suggested.  I'll try and have a look tonight at home if I have time.

Bo

Re: Mobile version cuts the bottom half of the photo off

To set your gallery's dimensions to an absolute number of pixels rather than percentages, either:
(1) If using svBuilder to create your gallery, the Gallery Width and Gallery Height can be entered in the 'Customize' tab (just enter numbers without the trailing '%'), or...
(2) Otherwise, you can edit the embedding code manually and change:

simpleviewer.load("sv-container", "100%", "100%", "transparent", true, flashvars);

... to:

simpleviewer.load("sv-container", "800", "600", "transparent", true, flashvars);

... where, in the example above, '800' is the gallery's width and '600' is the gallery's height. Change these values to suit your own web page.

Also i was trying to create a Multiple Gallerie page, but i could not manage to make it work.

In order to do this:
(1) Create your galleries with svBuilder and keep each gallery in a separate folder (for this example name the gallery folders 'gallery1' and 'gallery2')
(2) Upload the entire gallery folders (not just the contents) to your web server
(3) Embed the galleries using the baseURL method but give each 'sv-container' <div> and each set of flashvars a unique name, ie:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="gallery1/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars1 = {};
flashvars1.baseURL = "gallery1/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container1", "100%", "100%", "222222", true, flashvars1);
});
</script>
<div id="sv-container1"></div>
<!-- END SIMPLEVIEWER EMBED -->

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="gallery2/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars2 = {};
flashvars2.baseURL = "gallery2/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container2", "100%", "100%", "222222", true, flashvars2);
});
</script>
<div id="sv-container2"></div>
<!-- END SIMPLEVIEWER EMBED -->
Steven Speirs
SimpleViewer Support Team.

Re: Mobile version cuts the bottom half of the photo off

(2) Otherwise, you can edit the embedding code manually and change:
simpleviewer.load("sv-container", "100%", "100%", "transparent", true, flashvars);
... to:
simpleviewer.load("sv-container", "800", "600", "transparent", true, flashvars);

That works perfectly on the iPhone i set it to "640" by "480", i can scroll and the images are not Cropped.


Concerning the Multiple Gallerie here is my code, i basiccaly copy paste the one you gave me and changed it to suit my website:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://jenniferlynnbaker.comuf.com/JLB/web/Headshots/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars1 = {};
flashvars1.baseURL = "http://jenniferlynnbaker.comuf.com/JLB/web/Headshots/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container1", "100%", "100%", "transparent", true, flashvars1);
});
</script>
<div id="sv-container1"></div>
<!-- END SIMPLEVIEWER EMBED -->

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="http://jenniferlynnbaker.comuf.com/JLB/web/album/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars2 = {};
flashvars2.baseURL = "http://jenniferlynnbaker.comuf.com/JLB/web/album/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container2", "100%", "100%", "transparent", true, flashvars2);
});
</script>
<div id="sv-container2"></div>
<!-- END SIMPLEVIEWER EMBED -->

The result is that i have the first Gallery working but the second does not appear, did i make a mistake somewhere.

Thanks a lot for your support, much appreciated.

Re: Mobile version cuts the bottom half of the photo off

Steven Speirs wrote:

To set your gallery's dimensions to an absolute number of pixels rather than percentages, either:
(1) If using svBuilder to create your gallery, the Gallery Width and Gallery Height can be entered in the 'Customize' tab (just enter numbers without the trailing '%'), or...

Aha!  that seems to help a lot for me!  I need to fine tune other parameters for the images to fit in the window properly but at least the photos are not cropped and "unscrollable" anymore.  Awesome.  See here:

http://www.bostruyephotos.com/PVWeddingPhotos/Home.html

BTW, I may be asking for too much but, is there a way to make the photos "auto resize" to fit the iPhone screen?  Or did we just defeat that option by forcing an absolute number of pixels...?

Thank you Steven!

Bo

PS:  Jennifer:  It's really worth paying the small fee for the Pro version.  If nothing else it's small compensation for all the efforts Steven is putting in helping people out...  ;-)

Re: Mobile version cuts the bottom half of the photo off

@smailpouri

The result is that i have the first Gallery working but the second does not appear, did i make a mistake somewhere.

No. In my example, I had copied and pasted the standard embedding code for a typical gallery and forgot to change the gallery heights. Both galleries had a height of 100% which resulted in only one gallery being displayed. Try changing the gallery heights to percentages other than 100% or to absolute values.

@bmachine

BTW, I may be asking for too much but, is there a way to make the photos "auto resize" to fit the iPhone screen?  Or did we just defeat that option by forcing an absolute number of pixels...?

With gallery dimensions of absolute values, the gallery will not resize to the size of the browser window but you could re-enable the Full Window button by setting showFullscreenButton="TRUE" in your gallery's XML file and by replacing your <iframe> embedding code with the baseURL method.

Steven Speirs
SimpleViewer Support Team.