• Registered: 2015-05-27
  • Posts: 8

Topic: Mobile Portrait View

Hi

I have recently loaded juicebox lite and I'm playing around with it to see how it works. I have come across a small issue and I was wondering if there was a fix for it or if it is something I have set incorrectly.

When I view my gallery on ios8.3 (iphone 4s) it initially loads to the thumbnail view and the title I have set displays just over the top of the first row of images by about 2 or 3 pixels. there is a gap above the gallery and I would have expected the title to display in this space rather than spill over the images. However if I move the gallery up slightly the screen jumps and resets itself and removes the ios navigation bar at the bottom of the screen and now the title sits just above the images as I would have expected. However I would have thought that it would do this on loading and not need the user to move it up slightly to get it to view correctly

Also when I click on an image it opens and I can read the image title but the caption is hidden below the ios navigation buttons and for some reason I cannot get the screen to move up or the ios buttons to disappear so that I can see the caption. I said above that when I move the thumbnail gallery up the ios navigation buttons disappear and if I click on my first image when the screen is like this then it opens correctly and I can read the caption and move the screen up to see the rest of my footer etc.

Are these known issues or is there something in the settings that I need to change to stop this happening?

Thank you for looking at this issue.

Regards
Jason

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

Re: Mobile Portrait View

Please post the URL to your gallery so that I can take a look.
Also, if possible, please provide screenshots (perhaps upload them to your web server or a file sharing service such as Dropbox) so that I can see what you are seeing.

I would really need more information to troubleshoot (or explain) what you are reporting (e.g. the version of Juicebox you are using, the dimensions of the gallery, the dimensions of the thumbnails, the gallery configuration options, etc.)

In the meantime, here are a few notes which might help.

Please make sure that you are using the most recent version of Juicebox-Lite (v1.4.3.2) to ensure that any bugs from previous versions are not contributing to the problem.
If necessary, instructions for upgrading can be found on the Upgrading Juicebox support page.

If you are using a percentage height for your gallery, then please see this note or try using a fixed pixel height instead instead.

Do you see the problem in any of our demo galleries here?

Hopefully with a little more information, I'll be able to figure out what's going on.
Thank you.

  • Registered: 2015-05-27
  • Posts: 8

Re: Mobile Portrait View

Hi Steven, thanks for getting back to me. I only downloaded juicebox this week and I have just checked and it is version 1.4.3 (you quoted v1.4.3.2) so I'm not sure if I have the latest one or not.
The URL of my gallery is www.prophotocompany.co.uk/panorama.php. The gallery width and height were just left at the default of 100%. The only thing I changed from the default was to tick the option for use fullscreen expand other than that I didn't change anything. I also only uploaded the default code as well as follows:
</script>    <!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I did have to change the path of the files in the XML file as well as it defaulted to my local pc where I created the gallery so I changed it to the location of the files on the server.

I've uploaded 2 screen shots to the server so you can see what I am seeing:
www.prophotocompany.co.uk/image1.jpeg shows the title just cutting off the top of the thumbnails
www.prophotocompany.co.uk/image2.jpeg shows the caption being cut off. It also shows the ios navigation bar at the bottom and I cannot get the screen to move up or down.
I tried the demo version and they seemed fine which would suggest its something in my site but as I said I only change the one items and everything else was left at the default.
My brother has an iphone 5s which has a slightly larger screen and the same issue is evident on his phone as well.

If you need anything else just let me know.

Thanks for your help.
Regards
Jason

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

Re: Mobile Portrait View

Thank you for providing the URL to your web page and the screenshots.

The main problem is most likely with the dimensions of your gallery.
Your gallery has a height of 100% and, if the gallery was the only element on the page, it would fill the height of the browser window. However, your page contains a header and footer and the gallery has no parent container which has been given a height via CSS so Juicebox is unable to determine what its height should be 100% of.
Perhaps the easiest fix for this would be to set your gallery's height to be a fixed pixel value instead (such as 600px).

Also, your web page has a few HTML errors and it might help to fix these. There are not many errors but they may be non-trivial (stray and duplicate Doctype Declartations, <html>, <head> and <body> tags).
You can check the code on your web page with the W3C Markup Validation Service and fix the errors reported.

The gallery title overlapping the thumbnails images is caused by certain CSS rules in your 'style.css' file.
Lines 29-35:

body, input, select, textarea {
    color: #000000;
    font-family: "Raleway", Helvetica, sans-serif;
    font-size: 13pt;
    font-weight: 400;
    line-height: 2em;
}

Lines 328-330:

textarea {
    padding: 0.75em 1em;
}

These CSS rules apply to all 'textarea' tags on your page, including those within the Juicebox gallery. Juicebox has no option but to inherit such global CSS rules.
I would recommend that you apply your custom CSS rules to only those elements on your web page that require them through use of CSS selectors (ids and classes).

With a gallery of fixed height, the HTML errors on your page fixed and custom CSS applied only to non-gallery elements on your page, things should hopefully look better.

  • Registered: 2015-05-27
  • Posts: 8

Re: Mobile Portrait View

Thanks Steven, the above is extremely helpful.

As you can probably tell I'm very new at this so your pointers are extremely helpful and I have reviewed and fixed the HTML errors you noted as well.

Thanks again.

Regards
Jason

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

Re: Mobile Portrait View

You're welcome!