• dfyr
  • Member
  • Offline
  • Registered: 2017-09-08
  • Posts: 1

Topic: Hide main image until thumbnail clicked?

Hi,

I am keen to buy the pro version but I want to make sure it can do one thing before I do...

Is there some css or javascript trickery I could use to hide the main image and only show thumbnails, and then when a thumbnail is clicked have the main image come up and hide the thumbnails?

I would probably like to have 20 or so thumbnails taking up the whole screen in 5 rows, and then when a thumbnail is clicked and the main image opens the thumbnails revert to 1 row of four (scrollable) at the bottom.

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

Re: Hide main image until thumbnail clicked?

... hide the main image and only show thumbnails, and then when a thumbnail is clicked have the main image come up and hide the thumbnails?

This is certainly possible. You can force the gallery to always be displayed in Small Screen Mode (where thumbnails and main images are displayed on different pages) by setting screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
More information about Screen Modes can be found here.
Here is a sample gallery which demonstrates Small Screen Mode: https://www.juicebox.net/demos/pro/ssm/

I would probably like to have 20 or so thumbnails taking up the whole screen in 5 rows,

The thumbnail pages in Small Screen Mode are responsive and it is not possible to set the exact number of thumbnails (columns and rows) per page. The number of thumbnails displayed on a thumbnail page in Small Screen Mode will be determined by the thumbnail dimensions (set via the thumbWidth and thumbHeight configuration options) and the size of the user's browser window. If there is not enough available space to display all the thumbnails at once, then additional thumbnail pages will be generated and the user can navigate between them with the thumbnail paging arrows.
Take a look at this sample gallery and try resizing your browser window: https://www.juicebox.net/demos/pro/full … Mode=SMALL

... and then when a thumbnail is clicked and the main image opens the thumbnails revert to 1 row of four (scrollable) at the bottom.

This is not possible. In Small Screen Mode, the thumbnails and main images are always displayed on different pages (never together) and in Large Screen Mode, the thumbnails and main images are always displayed together on the same page (although the thumbnails can be toggled on and off via the Thumbnail Button or with the auto-hide functionality).
Here's a sample gallery featuring the Thumbnail Button (on the gallery's Button Bar at the top right) which shows and hides the thumbnails when clicked: https://www.juicebox.net/demos/pro/default/

  • Registered: 2017-09-29
  • Posts: 1

Re: Hide main image until thumbnail clicked?

Steven @ Juicebox wrote:

This is certainly possible. You can force the gallery to always be displayed in Small Screen Mode (where thumbnails and main images are displayed on different pages) by setting screenMode="SMALL"

The problem with this answer, as far as I'm concerned, is that small screen mode isn't really suitable for large (i.e., non-touch) screens. The fact that this is possible in small screen mode, though, makes me think it might not be that hard to "fix" Juicebox to allow for this. Rather than start another thread, I thought I'd put my $0.02 worth here.

What I'd like is the option of having that second page, where thumbnails are displayed, just as they are in small screen mode, but without all the other "small screen" changes. The only real problem I see is that the "small screen thumbnail only" page has no mouse navigation. That is, on my workstation, with my gallery in small screen mode, I get 8 rows of 17 images (136 images). If my gallery has more images than that, at the bottom is says "1 of 4" (or however many pages there are). But I don't see any easy way to get to those other pages. If I click on the last image on the page to bring up the single image, advance to the next image, and then return to the thumbnail page, I get the second page of 4, but that's not really a suitable navigation method.

So, my feature request would be:

  • Add an option to large-screen mode that displays the Show Thumbnails link that will bring up a page of thumbnails (as in small screen mode but without the other small screen features).

  • Add navigation to that thumbnail page in large-screen mode.

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

Re: Hide main image until thumbnail clicked?

But I don't see any easy way to get to those other pages.

Set showSmallThumbNav="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section) and the thumbnail pages in Small Screen Mode will feature 'previous' and 'next' navigation arrows (to the left and right of the thumbnails) which you can click (or tap) to navigate through the thumbnail pages. (You will still be able to swipe between thumbnail pages on mobile devices.)

So, my feature request would be:

Many thanks for the feedback and suggestions.
It would be great if you could post your suggestions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.