1 Topic by kilooloogung (edited by kilooloogung 2014-04-27 21:40:05)

  • Registered: 2014-04-25
  • Posts: 28

Topic: Tiny thumbnails and controls (sometimes) with iPhone

This gallery displays perfectly in iMac and iPad: http://www.brianwatsonphoto.co.uk/Africa/

This is perfect as well, but not on iPhone 5/Safari: http://www.brianwatsonphoto.co.uk/Aviation/. Despite identical settings, it has tiny thumbnails (nine/row in both Portrait and Landscape), and tiny text & controls. Thumbnail Paging Text is not set, but shows. Gallery Title is set to centre but appears on the left.

Any clues, please, about what is going on here?

Thanks,

Brian

============================================

EDITED: The cause was a couple of corrupted files in /jbcore/. Fixed.

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

Re: Tiny thumbnails and controls (sometimes) with iPhone

Despite identical settings, it has tiny thumbnails (nine/row in both Portrait and Landscape), and tiny text & controls.

Your Africa gallery uses Juicebox-Pro v1.4.0 but your Aviation gallery uses Juicebox-Pro v1.3.3.
Upgrade your Aviation gallery to Juicebox-Pro v1.4.0 by replacing the gallery's 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.4.0 download zip package ('juicebox_pro_1.4.0/web/jbcore/').

Thumbnail Paging Text is not set, but shows.

Your galleries set showSmallPagingText="TRUE". If you do not want the thumbnail paging text to be displayed in Small Screen Mode, then set showSmallPagingText="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).

Gallery Title is set to centre but appears on the left.

The galleryTitleHAlign configuration option (which affects the horizontal alignment of the Gallery Title) is applied only in Large Screen Mode. In Small Screen Mode, the default value of LEFT is always used.

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

Thanks again, Steven.

I had tracked it down to something in /jbcore/, but it was 1.33 and not a corrupted 1.40 (sorry, my error again).

Galleries on the iPhone look great now with five columns of thumbnails, although the galleryTitle overlaps the top left thumbnail by two pixels. Is there an option to not show the gallery title in Small Screen mode?

Thanks for the great support; only 4px from perfection now!

Regards,

Brian

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

Re: Tiny thumbnails and controls (sometimes) with iPhone

This looks like a bug (the gallery title should not overlap the thumbnails) and I have notified the developers. It should hopefully be fixed in the next version of Juicebox-Pro.

Is there an option to not show the gallery title in Small Screen mode?

There is no specific configuration option to hide the Gallery Title only in Small Screen Mode but you could achieve this by adding the following CSS to your gallery's web page:

.jb-idx-ssm-title-wrapper {
    display: none;
}
  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

Done. Works. Thank you again!

Regards,

Brian

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

In Small Screen Mode, with the Gallery Title hidden using your suggestion above, I have fifteen icons on my Gallery page http://www.brianwatsonphoto.co.uk/Africa/ which looks great. But my Back Button text ("Back") appears when the page loads, just before the thumbnails appear, then immediately disappears. Tested on iPhone 5.

Is there a way to have a Back Button on a Gallery page like this?

Regards,
Brian

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

Re: Tiny thumbnails and controls (sometimes) with iPhone

But my Back Button text ("Back") appears when the page loads, just before the thumbnails appear, then immediately disappears.

I notice that your gallery uses Juicebox-Pro v1.4.0.
Please try upgrading to the latest version (v1.4.1). Instructions for upgrading Juicebox-Pro can be found here.
This should fix the momentary display of the Back Button on the Small Screen Mode thumbnail page.

Is there a way to have a Back Button on a Gallery page like this?

In Small Screen Mode, the Back Button is displayed only on the main image pages (and not on the thumbnail page).
Two possible workarounds would be to either:
(1) Force the gallery to use Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize-> General' section).
... or:
(2) Prevent the thumbnail page from being displayed in Small Screen Mode by setting showSmallThumbsOnLoad="FALSE" and showSmallThumbsButton="FALSE" (in JuiceboxBuilder-Pro's 'Customize-> Thumbnail' section).

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

Thanks Steven,

Neither option looks good: screenMode="LARGE" makes that main image not much bigger than the thumbnails, and preventing the thumbnails page from appearing at all does not work well for large numbers of images.

Is there any other way to get from an image page to the thumbnail gallery in small screen mode, apart from using the browser's back button? This always seems awkward to me, now that I use minimal-ui.

Could I use jQuery to add my own Back button to my thumbnail gallery? It would be helpful to know if this could work before spending a lot of time and failing.

Regards,
Brian

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

Steven,
I think I have an acceptable solution using a plain javascript button visible only at screen widths used by Small Screen Mode.

<button class="backButton" onclick="location.href='../index.html'">Back</button>

and styles

button{z-index:999; position:fixed; top:15px; left:0; height:25px;}
@media only screen and (min-width:768px) {.backButton{visibility:hidden;}}

The button is sized/positioned so as to cover the JuiceBox Home button when the page is viewed in a browser and the window is made smaller than 768px.

This may help others (who may have even better solutions!).

Regards,
Brian

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

Re: Tiny thumbnails and controls (sometimes) with iPhone

It sounds like you are just looking to have the Back Button displayed on main image pages in Small Screen Mode.
If so, then you can set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Back Button' section).
Please note that the Back Button will be hidden if you use the Info Button and the user clicks it to hide the overlay.
If you use the Info Button and want a permanent Back Button in Small Screen Mode, then you could try the following (but it looks like you do not use the Info Button so setting showSmallBackButton="TRUE" should be enough).

You could use the Open Image Button (if you are not already using it for its regular purpose) as the Back Button.
Set all your linkURLs to the page you want to redirect users to.
Set all your linkTargets to '_self'.
Force the Open Image Button to use the Back Button icon by changing \e004 to \e014 on line 765 of JuiceboxBuilder-Pro v1.4.1's 'jbcore/classic/theme.css' file. Alternatively, you could choose a completely different icon by following the Using Custom Icons support section in the Theming Guide.
Change the rollover tooltip text from 'Open Image in New Window' to something more appropriate, such as 'Go To Thumbnail Page' using the languageList configuration option. For example:

languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Go To Thumbnail Page|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"

Now the Open Image button will look and function like the Back Button but it will be on the Button Bar and will not disappear when the Info Button is clicked.

You could also include links in your image titles or captions using HTML formatting as documented in this FAQ:
How do I add HTML formatting to image captions and titles?

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

...Back Button displayed on main image pages in Small Screen Mode

No, sorry, NOT in Main Image Pages. I'm looking to have a Back Button on the opening page of a Gallery in Small Screen Mode.

In Small Screen Mode my Galleries open to show just thumbnails without any controls. showSmallBackButton has no effect here: it seems to control the Back Button only on Main Image Pages. Your suggestions (thank you!) do work on Main Image Pages, but aren't needed there because they have Back Buttons already.

On my iPhone 5 http://www.brianwatsonphoto.co.uk/Aviation/index.html shows twelve thumbnails but no controls. On the big screen the same page displays 20 thumbnails, one large image, and a toolbar with a Back Button.

showSmallBackButton should work in thumbnails-only pages in Small Screen Mode but seems not to. Is this a bug?

Brian

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

Re: Tiny thumbnails and controls (sometimes) with iPhone

Is this a bug?

No. As I mentioned a couple of posts ago:

In Small Screen Mode, the Back Button is displayed only on the main image pages (and not on the thumbnail page).

This is by design to maximize the amount of space available for the thumbnail images. The only other gallery elements which may be displayed on the thumbnail page in Small Screen Mode are the Gallery Title, the Thumbnail Paging Text and the Thumbnail Navigation Buttons.
It looks like your own solution is, indeed, the best one for your required scenario.

  • Registered: 2014-04-25
  • Posts: 28

Re: Tiny thumbnails and controls (sometimes) with iPhone

Thanks for you help, and your many prompt replies, much appreciated. I shall proceed with my javascript button Back button.

Regards,

Brian