• Registered: 2016-07-04
  • Posts: 1

Topic: Embedded gallery on mobile device is not resizing

I have embedded a Gallery on an existing page (both directly into a Div and testing with the baseUrl example) and this works great for large screens and iPad, but renders too large on iPhone and Galaxy. The page is also not 'pinchable' on mobile.  Can you point me to an example of an embedded gallery that is working so I can compare?

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

Re: Embedded gallery on mobile device is not resizing

... both directly into a Div and testing with the baseUrl example...

There is no difference in display or functionality between the regular embedding method and the baseUrl embedding method. The only difference is the location of the gallery files on your web server.

... but renders too large on iPhone and Galaxy.

The gallery (or Splash Page) will always be displayed at the size specified by the galleryWidth and galleryHeight configuration options in the gallery's embedding code.
If using a percentage height, please ensure that all parent containers of your gallery have heights specified via CSS.
Otherwise, Juicebox may not be able to determine what its actual height should be a percentage of.
Also, please see this note regarding Using Percentage Heights.
If your gallery currently has a percentage height, try using a fixed height (such as 600px) instead.

The page is also not 'pinchable' on mobile.

It is possible to pinch-zoom an image within a gallery but only under certain circumstances.

You would need to be very precise with your gesture as Juicebox uses its own gestures and the initial movement of a pinch-zoom action could be misinterpreted as the start of a swipe gesture to navigate within the gallery.

Also, you would need to ensure that the viewport of the web page has not been locked (by a meta viewport tag which prevents the user from scaling the page) which it would be by default for a 100% x 100% gallery or for an embedded gallery which has been expanded (from the Splash Page or via the Expand Button). For more information on expanded gallery behavior on iOS devices, please see here.

If, for example, you embedded a gallery in a web page at dimensions of less than 100% x 100% alongside other content and set showSplashPage="NEVER" or screenMode="LARGE", then you should be able to pinch-zoom an image within the gallery on a mobile device.

Can you point me to an example of an embedded gallery that is working so I can compare?

We have an example of a gallery embedded in a web page alongside other content here: https://www.juicebox.net/demos/pro/embedded/
Other demo galleries can be found on the Demos page here: https://www.juicebox.net/demos/

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look at it for myself and hopefully help further.

I hope these notes help.