• Registered: 2015-06-10
  • Posts: 17

Topic: Problem with galleries in mobile phone (android)

Hi. I'm having some problems with the galleries when I test them on a mobile phone.

1. The images are cropped in portrait and they become a "sliver" in landscape.
2. They seem to load twice :(


The gallery is set up with these parameters:

    maxImageWidth="570"
    maxImageHeight="427"
    galleryHeight="65%"
    showOpenButton="false"
    showExpandButton="false"
    showThumbsButton="false"
    enableAutoPlay="true"
    autoPlayOnLoad="true"
    displayTime="7"
    backgroundColor="rgba(255,255,255,1)"
    thumbFrameColor="rgba(255,255,255,0.5)"
    expandInNewPage="FALSE"
    enableKeyboardControls="true"
    enableLooping="true"
    showImageNumber="false"
    captionBackColor="rgba(0,0,0,0)"
    imageScaleMode="NONE"
    useThumbDots="false"
    showSplashPage="NEVER"
    screenMode="auto"

What could be wrong? Thanks!

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

Re: Problem with galleries in mobile phone (android)

Please post the URL to your gallery so that I can take a look at the problem for myself. Thank you.

In the meantime, please see this note regarding Using Percentage Heights.
If you are using a percentage height, I would recommend that:
(1) You set the gallery's height to 100% so that the gallery fills its parent container. You can then set the height of the parent container as required.
(2) Make sure that all parent containers of the gallery have heights specified via CSS. Otherwise, Juicebox may not be ablet o calculate what its actual height should be. (For example, if you set the gallery's height to be 100%, Juicebox needs to know what its actual height should be 100% of.)

Alternatively, try setting your gallery's height to a fixed pixel value (such as '600px') instead to see if this helps.

  • Registered: 2015-06-10
  • Posts: 17

Re: Problem with galleries in mobile phone (android)

Thanks, Steven. In fact, I had set the height at 65% to "shrink" the gallery. I'm working with responsive grid based design, so there are practically no heights set. The gallery container hasn't got one for example.

Maybe there is another way of setting up a 100% height for the gallery and still have less space between the top and the image and the image and the thumbnails. Is there any padding or margins somewhere in the code I could adjust?

Anyway, you can see the example here: http://tinyurl.com/ofls48q

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

Re: Problem with galleries in mobile phone (android)

... have less space between the top and the image and the image and the thumbnails.

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

With a responsive site and a percentage height gallery, you do not know what size and shape the gallery will be (it will be dependent on the size and shape of the user's browser window). However, when using imageScaleMode="SCALE_DOWN" (the default value), you can be sure that Juicebox will scale the images down so that they are displayed as large as possible without cropping within the gallery's image area.
Please note that the size of the gallery is not determined by the size or aspect ratio of the gallery images. It is determined by the gallery dimensions and, if you use percentages, then also by the layout of your page (the dimensions of the gallery's parent containers).

Hopefully the suggestions in the FAQ will help.

With regard to padding, Juicebox has several padding options: stagePadding, imagePadding, imageNavPadding and thumbPadding. stagePadding and imagePadding are set to 0 by default.

5 Reply by made2105 (edited by made2105 2015-06-12 22:16:20)

  • Registered: 2015-06-10
  • Posts: 17

Re: Problem with galleries in mobile phone (android)

Thanks! I did that and it worked, although I still have too much space on top. Maybe it's because the images are not exactly the same size. I'll try adjusting them. You can check that out here http://tinyurl.com/nwl62xa

All what I'm talking about is when I view the galleries in mobile phone. Another thing, the images still "flicker"or seem to load twice. And, how can I stop the autoPlay to stop when I accidentally tap or click on an image?

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

Re: Problem with galleries in mobile phone (android)

I still have too much space on top.

Your gallery is too tall for your images. I would recommend setting your gallery's height to be a fixed pixel value so that the gallery's image area has an aspect ratio similar to that of the images themselves.

Another thing, the images still "flicker"or seem to load twice.

This problem may be related to server-side caching.
If caching is disabled on your web server, then Juicebox will have to download the images every time it needs them (as it will not be able to request them from a cache) and this may be causing the problem.
If you have an Apache web server and have a .htaccess file with an entry such as the following (to disable caching), then please try removing it to see if it helps.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

This may solve the problem (or at least hopefully point you in the right direction).

And, how can I stop the autoPlay to stop when I accidentally tap or click on an image?

This might be difficult to achieve. There is no easy way to do this via configuration options. You might need to use JavaScript to remove all click and touch handlers from the gallery. However, I have not been successful in my own attempts to do this so, unfortunately, cannot provide any sample code that you can use.