• Registered: 2014-06-22
  • Posts: 3

Topic: expanding problems with multiple galleries in a frame

Hi Steven,

I am using your script to embed several galleries in a frame. As far as I remember it was a solution you gave to another user who asked for help with multiple galleries.
This works quite well on all devices, but on iPad or iPhone I notice a white border on the bottom part of the screen after I turn the device to landscape modus.
Also expanding in landscape modus, turning to letter modus and reexpanding results in a smaller gallery.
Refreshing the browser window always will correct this smaller view!

I updated to 1.41 but problems will stay the same. Is there a solution to fix this in my index.htm (containing your script)?
You will find the URL in my profile!



best regards,

Frank

efausde's Website

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

Re: expanding problems with multiple galleries in a frame

This works quite well on all devices, but on iPad or iPhone I notice a white border on the bottom part of the screen after I turn the device to landscape modus.

I do not see this problem on an iPod Touch running iOS 6.1.6.
What version of iOS are you using? Also, do you see the problem in Chrome or just in Mobile Safari?
One possible fix for this might be to run the doLayout() function (to resize the gallery to fill the page) when the device's orientation is changed. Try adding the following JavaScript to your web page:

window.onorientationchange = function() {
    doLayout();
};

Also expanding in landscape modus, turning to letter modus and reexpanding results in a smaller gallery.

I see this problem (but only in Mobile Safari under iOS 6.1.6 and not in Chrome).
Ordinarily, it should be possible to run the doLayout() function when a gallery is closed (from its expanded state) within the onExpand Juicebox-Pro API event.
However, this will not work on iOS devices as the gallery is expanded in a new page and the onExpand event will not be fired when the gallery is closed. Please see here for details.
You could force expandInNewPage="FALSE" but this will change the scale of the embedding page (which has currently been logged as a bug and should hopefully be fixed in a future version).
Unfortunately, I do not see an easy fix for this (other than to either not rotate your device between expanding and closing a gallery or to use Chrome in preference to Mobile Safari, both of which I realise are not practical solutions).

  • Registered: 2014-06-22
  • Posts: 3

Re: expanding problems with multiple galleries in a frame

Hi,

ok i have installed Chrome on my ipad  - and oops, it works! No white border anymore.
Also the 2nd point doesnt appear with Chrome.

Changing expanding modes is not so important for the users I think. But the first problem, which appears only by changing orientation, should be fixed somehow...

I changed the script, but that doesn't fix Safari problems - maybe I made a mistake?

<script type="text/javascript">

            // Function to resize gallery
            function doLayout() {
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                var headerHeight = $('#header').outerHeight();
                var galleryHeight = parseInt(windowHeight) - parseInt(headerHeight);
                $('#wrap').height(galleryHeight);
            }

            // **ADDED**
            window.onorientationchange = function() {
                doLayout();
            };

            // Function to load selected gallery on demand using baseUrl
            function loadGallery(base) {
                new juicebox({
                    containerId: 'juicebox-container',
                    baseUrl: base
                });
            }

            // Run following code when page is initially loaded
            $(document).ready(function () {

                 // Run function to resize gallery
                doLayout();

                // Ensure function to resize gallery is run when browser window size changes
                $(window).bind('resize', doLayout);

                // Run function to load Gallery #1
                loadGallery('juicebox_abstrakt/');
            });

        </script>

efausde's Website

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

Re: expanding problems with multiple galleries in a frame

But the first problem, which appears only by changing orientation, should be fixed somehow...

I changed the script, but that doesn't fix Safari problems - maybe I made a mistake?

No, you have not made a mistake.
What version of iOS do your devices run?
Also, as I am unable to replicate the problem, could you please upload a screenshot somewhere so that I can see what you are seeing? Thank you.

The doLayout() function uses jQuery functions and uses the version of jQuery bundled within the 'juicebox.js' JavaScript file. It is possible that there may be a problem in this version of jQuery with the functions used (such as outerHeight) in Mobile Safari and it might be worth including the current version of jQuery (v1.11.1) in your page to see if this makes a difference. Download jQuery v1.11.1, place the 'jquery-1.11.1.min.js' file in the same directory as your gallery folders and include the following line of code in the <head> section of your main page:

<script src="jquery-1.11.1.min.js"></script>

It's a long shot but it might be worth trying.

5 Reply by efausde (edited by efausde 2014-06-23 14:21:48)

  • Registered: 2014-06-22
  • Posts: 3

Re: expanding problems with multiple galleries in a frame

I included the script and the js file - no change :-/
I am using IOS 7.1.1 on my devices.

screenshots:
http://galerie.duellberg.net/Foto.jpg letter mode ok
http://galerie.duellberg.net/Foto_2.jpg landscape mode not ok
http://galerie.duellberg.net/Foto_1.jpg landscape mode ok after refresh

efausde's Website

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

Re: expanding problems with multiple galleries in a frame

Unfortunately, as I cannot replicate the problem, I am unable to test possible solutions and some trial and error may be required.
Try keeping the window.onorientationchange code in place but changing the methods of determining the height of the window element (and possibly that of the header, too).
There are several methods that you could try:

These forum threads seem to be describing similar scenarios (a web page with a total height of 100% and issues in landscape orientation under iOS 7) and may point you in the direction of a solution.
http://stackoverflow.com/questions/1901 … yout-issue
http://stackoverflow.com/questions/1885 … -100-692px

Also, I do not know if it will help but you could try adding the minimal-ui meta viewport tag to the <head> section of your web page:

<meta name="viewport" id="jb-viewport" content="minimal-ui" />

Whatever solutions you try, be sure to clear your browser's cache before you check each one to ensure that your browser is fetching and using the most recent versions of your gallery files.