• Registered: 2013-09-07
  • Posts: 17

Topic: Image out of screen on ios !

Hello !

I just noticed a very bad problem on my galleries on Safari on ios 8.1 : When I open the gallery, I see the buttons but not the image !!!
To see it online just open http://yannicklerestif.com and click on the first gallery.

This is very bad because I think 50% of my users will use ios and the gallery really looks like it's just not working, leading them away before they even started !!

Some more details :
- I am using ios 8.1 on iphone 4S
- I think the problem is new in ios 8. In any case it was working before.
- The problem doesn't show in Chrome on ios
- Actually I think the image does show but out of screen (on the second gallery, I can see the top of the image at the bottom of the screen)
- If I slide forth, the next image show all right
- If I refresh the page, the image shows all right

I'd really appreciate if you could help me work around this...!

Thanks in advance,


Yannick

  • Registered: 2013-09-07
  • Posts: 17

Re: Image out of screen on ios !

Re-hello !

I realized caption doesn't show, either.

I could make it almost work doing this :

jb.onInitComplete = function() {
    setTimeout(function() {
        jb.showImage(2);
        jb.showImage(1);
    }, 2000);
}

But very ugly :-(
And won't work work without the setTimeOut. And caption still doesn't show :-(

Also I tried to trigger resize event :

var handler = window.onresize;
handler();

But on small devices this brings the thumbs page up.

So It's still not working.
None of these workarounds is online so you can see the behavior.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Image out of screen on ios !

Do you see the problem in any of our own demo galleries on this web page: http://www.juicebox.net/demos/ ?
Please try the Simple gallery (http://www.juicebox.net/demos/pro/simple) which has the thumbnails and captions positioned to the side of the gallery (somewhat similar to your own gallery).

If you do not see the problem in our own Simple demo gallery, then the problem may be unique to your own gallery or web page. Here are a few things you could try to see if they help:

(1) If possible, try using only alpha-numeric characters in your configURL's query string (or escape other characters such as spaces).

(2) Your dynamically-generated XML file is not seen by the browser as an XML file.
In your 'config.php' file, try adding the following code to set the file's header correctly:

<?php
    header("Content-type: application/xml");
?>

(3) Also, there is no XML declaration at the top of the dynamically-generated XML file.
Make sure that your 'config.php' file outputs the following line of code at the very top of the dynamically-generated XML file:

<?xml version="1.0" encoding="UTF-8"?>

(4) Try clearing your browser's cache to ensure that your browser is fetching and using the most recent versions of your gallery files.

(5) It looks like you  have renamed your gallery's 'jbcore' folder. Try uploading the complete stock Juicebox-Pro 'jbcore' folder to your web server (without renaming it or changing its structure) and load the 'juicebox.js' file from within it.

Hopefully one of the suggestions above will help. They may not make a difference but, they should all be fairly quick and easy to try.

If you do see the problem in our Simple demo gallery, then it sounds like a more generic issue with Juicebox and iOS 8.
If possible, please upload a couple of screenshots somewhere to demonstrate the problem so that I can pass them on to the developers if I need to submit a bug report. Thank you.

  • Registered: 2013-09-07
  • Posts: 17

Re: Image out of screen on ios !

Hello !

Well actually I found out that replacing this in my code :

firstImageIndex:"1",
showSmallThumbsOnLoad:"true",

by this :

showSmallThumbsOnLoad:"false",

Solves my problem of first image displaying bad.
This was done to workaround another problem where caption on first image didn't show.
This first problem is back... But this was a lot less of a problem to me. So I think I'll stick with that for now.

I'll try to see if swapping above lines in one of your demo galleries shows the problem (only I won't be able to right now).
Chances are it will.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Image out of screen on ios !

Using firstImageIndex in Small Screen Mode should skip the thumbnail page and initially display the specified image.
If you can confirm that there is a problem when using firstImageIndex="1" and showSmallThumbsOnLoad="TRUE" in Mobile Safari on iOS 8.1, then please let me know. Thank you.

caption on first image didn't show

This sounds like a known bug: the caption for the first image fails to display when captionPosition="BELOW_THUMBS" and showSmallThumbsOnLoad="FALSE".
(With your other problem and the mention of Mobile Safari on iOS 8.1, I did not make the connection earlier between your caption problem and the bug. It was not until you mentioned "caption on first image" that I realised the cause of the problem.)
However, this bug has already been addressed and will be fixed in the next version of Juicebox-Pro (although I do not know when it will be released).

  • Registered: 2013-09-07
  • Posts: 17

Re: Image out of screen on ios !

This sounds like a known bug: the caption for the first image fails to display when captionPosition="BELOW_THUMBS" and showSmallThumbsOnLoad="FALSE".

Yes that is what you told me in a previous post and the reason I used firstImageIndex="1" and showSmallThumbsOnLoad="TRUE" instead of just  showSmallThumbsOnLoad="FALSE" !
So because I reverted this my old problem is back : captions don't display on first image. This is the known bug you're referring to, and it is not on safari ios, only on desktop.
Glad to know it's going to be fixed !

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Image out of screen on ios !

The bug referred to above (whereby the caption for the first image fails to display) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.