• Registered: 2019-01-08
  • Posts: 7

Topic: Gallery main image not loaded on mobile handset

Hi,

Please refer my website www.photographycomesalive.com

I am facing one problem as the gallery main image is not loaded in my android based hand phone which has comparable display size with today's major mobile handsets available in market. At the same time website works perfectly fine on larger display line 9.8 ipad or laptop.

On mobile phone I see only thumbnails and main image is displayed only when I client on thumbnail.

Kindly help.

Thanks & Regards,
Avinash Sawant

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

Re: Gallery main image not loaded on mobile handset

On mobile phone I see only thumbnails and main image is displayed only when I client on thumbnail.

What you are describing is Small Screen Mode.

On mobile (small screen) devices, Juicebox displays the gallery in Small Screen Mode where the thumbnails and main images are displayed on separate pages (to give the main images as much room as possible to be displayed).
When a thumbnail is clicked/tapped, the thumbnail page is replaced with the chosen image.
The user can return to the thumbnail page by clicking/tapping the 'Thumbnail' button on the gallery's Button Bar.

Please see the Screen Modes support section in the Gallery Tour for more information.

You can choose to always have the gallery displayed in Large Screen Mode (which displays the thumbnails and image images together, like in a desktop browser, no matter what device the gallery is viewed on) by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

If you would like to continue to use Small Screen Mode for mobile devices but would rather have the first image displayed initially rather than the thumbnail page, then set showSmallThumbsOnLoad="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).

Also, if you would like to have your web page's content (including the thumbnails and Button Bar) scaled up when displayed on mobile devices, then try adding the following <meta> tag to the <head> section of your gallery's web page:

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />

I hope this helps.

  • Registered: 2019-01-08
  • Posts: 7

Re: Gallery main image not loaded on mobile handset

Hey Steven,

Sorry for late reply, I was actually exploring the options you has suggested for mobile devices. I could make it worked as my satisfaction. Thanks for your help,

But I am observing another issue as the caption of the images are not really showing up on main image even after setting the option as OVERLAY_IMAGE for thumbnail. I see only for mobile devices the caption are appearing below the main image, my tab and laptop is showing the caption correctly.

KIndly suggest the way out.

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

Re: Gallery main image not loaded on mobile handset

Please note that the captionPosition configuration option is a Large Screen only option.
This is noted in the short description of the option here.
It is not used when the gallery is displayed in Small Screen Mode (on mobile devices) where the value of OVERLAY is used. (You can tap the screen for the overlay to appear and disappear.)

For reference, more information about the different screen modes (Small Screen Mode vs Large Screen Mode) can be found here.

Incidentally, if you want to force your gallery to be displayed in Large Screen Mode in all browsers and on all devices, then set screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

[Post edited for content.]

  • Registered: 2019-01-08
  • Posts: 7

Re: Gallery main image not loaded on mobile handset

Hi Steven,

Please refer to my website www.photographycomesalive.com for your reference.

I will try the LARGE mode setting meanwhile.

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

Re: Gallery main image not loaded on mobile handset

Sorry, my last post was incorrect.
In Small Screen Mode, captionPosition uses the value OVERLAY (rather than the default Large Screen Mode value of OVERLAY_IMAGE).
(I have now corrected my post above to avoid any confusion for other users reading this thread.)

This is also what I see in your gallery (where the caption area sits at the foot of the gallery and spans the entire gallery).

Setting your gallery to use Large Screen Mode will allow you to use captionPosition to position your caption area elsewhere.

Apologies for the incorrect information previously but I hope that this helps to clarify things.