1 Topic by jamesMN (edited by jamesMN 2013-04-22 23:11:09)

  • Registered: 2013-04-22
  • Posts: 1

Topic: Display on iPhone

I purchased the pro version in the hopes that it would help me display a gallery inside of a template page.

The sample page is here:  http://mobiletest.swell-sites.com/gallery-test.html

It looks fine on a computer screen but on my iPhone the gallery doesn't function IN the page, you have to expand to the full page version.   I would really like something to work like the current version: http://www.uglydeck.com/ where you still can see the rest of the page on a mobile device around the image gallery....   Any help is greatly appreciated.  I'm going to keep playing around with it to see if I can get it figured out.

(much tinkering later)

Now I feel like I just can't get the spacing right.   What I want, on all displays, is for the picture to appear as wide as the screen / or div container, and for the thumbnails to be immediately underneath it.    I think that on a phone and an ipad I'd like the container to be 50% of the height of the total screen, and for width and height to both be 100% on a computer.

Can I plug in responsive commands to the javascript? 

for example, right now I have:

<script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId : 'juicebox-container',
                galleryWidth: '100%',
                galleryHeight: '100%',
                backgroundColor: '#222222'
            });
        </script>

Could I add a line of code to change the rules based on the width of the screen and or device? 

Thanks in advance for any help.

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

Re: Display on iPhone

The sample page is here:  http://mobiletest.swell-sites.com/gallery-test.html

It looks fine on a computer screen but on my iPhone the gallery doesn't function IN the page, you have to expand to the full page version.

What you are seeing is the Splash Page. This is the default behavior in Small Screen Mode.
For more information about Juicebox and Screen Modes, please see here.
If you would rather have Juicebox display the gallery in place of the Splash Page, set showSplashPage="NEVER".
Alternatively, you could force Juicebox to use Large Screen Mode in all browsers and on all devices by setting screenMode="LARGE".

What I want, on all displays, is for the picture to appear as wide as the screen / or div container, and for the thumbnails to be immediately underneath it.

If you want thumbnails to be displayed below the main image when the gallery is displayed in all browsers and on all devices, then you would have to set screenMode="LARGE".

I think that on a phone and an ipad I'd like the container to be 50% of the height of the total screen

It would be very difficult to use the controls in a Large Screen Mode gallery whose height is 50% of an iPhone screen. This is why the default behavior of Juicebox is to use a Splash Page to then open the gallery fullscreen where the controls are slightly larger and easier to tap.

Could I add a line of code to change the rules based on the width of the screen and or device?

Juicebox already adapts to different devices and screen sizes and it would not be recommended to try to override Juicebox's own detection mechanisms with your own JavaScript code. Please see the Gallery Tour for details.