• Registered: 2014-09-12
  • Posts: 1

Topic: Juicebox Pro Pre Sale Question!

Hi,

I want to build a photography website using Juicebox's Full Screen Gallery function, which I believe is only available in the 'Pro' version.

Before I purchase the license, I'd like to know if what I have in mind will actually be possible, as I have fairly limited HTML/CSS knowledge and zero experience with JS!

That said, I *think* this should be pretty straight forward, so here we go:

I'd like a full screen gallery with a semi transparent navigation bar at the top of the screen and *over* the full screen image.

E.g. https://dl.dropboxusercontent.com/u/167 … design.jpg

(Each navigation label will have a hard coded link to another gallery, blog or contact page)

My initial thoughts are using CSS positioning for the navigation bar and its elements, and by using a high enough 'z-index' value it will be *above* the embedded Juicebox Gallery.

E.g. https://dl.dropboxusercontent.com/u/167 … oughts.jpg

The only problem I foresee is that the Juicebox gallery has left and right 'click zones' that cover the whole image for navigation. Now, would I have to add some padding on the top to these click zones to prevent a conflict with my nav bar ?, or, would my nav bar's links *override* the Juicebox click zones as it would be 'higher up' in the z-index 'stack' ?

E.g. https://dl.dropboxusercontent.com/u/167 … flicts.jpg

Any help, tips, or problems/solutions that I have missed would be really appreciated..

Thanks for looking,

Barry

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

Re: Juicebox Pro Pre Sale Question!

First of all, distinctions should be made between a 100% x 100% gallery (which fills the browser window without being expanded), expanding 'full browser' and expanding 'full screen'.

You can embed a gallery in a web page and make it fill the browser window by giving it dimensions of 100% x 100%.
This can be done in both Juicebox-Lite and Juicebox-Pro.

If a gallery is smaller than the browser window (has dimensions of less than 100% x 100%), then the gallery can be expanded (to fill the browser window) by clicking the gallery's Expand Button (on the Button Bar). (The Expand Button is automatically hidden in a 100% x 100% gallery.)
This is also true of both Juicebox-Lite and Juicebox-Pro.

Juicebox-Pro has a further feature (useFullscreenExpand) whereby a gallery can be expanded to cover the user's entire screen (rather than just the browser window). This is not available to Juicebox-Lite users.

When a gallery is expanded (either 'full browser' or 'full screen'), the gallery is the only thing visible. All other elements on your web page are temporarily hidden from view until the expanded gallery is closed.

It sounds like what you are looking for is a gallery with dimensions of 100% x 100% (and no need to worry about 'full browser' or 'full screen' expansion).

You could certainly stack a navigation banner on top of a gallery by assigning it a high enough z-index value but you may run into problems. This may obscure the gallery's Button Bar (depending on where it is positioned) and it will almost certainly partially obscure the main image hit areas (although only over the portions of the main image which the navigation banner overlaps, the remainder of the main image hit areas not covered by your navigation banner should still work fine). If this becomes a problem, there are still the main image navigation buttons which can be clicked to navigate throughout the gallery and you can also add navigation buttons to the Button Bar (Pro only) by setting showNavButtons="TRUE".

I would not try to add any padding to internal CSS classes used by Juicebox (for example the hit areas). Juicebox would not be aware of such custom modifications and this could cause problems when the gallery is resized (on different devices or when the user's browser window is resized).

Embedding a Juicebox-Lite gallery is exactly the same as embedding a Juicebox-Pro gallery and stacking a navigation banner on top of a gallery would make no difference whether Lite or Pro is being used so you could try out what you want to do with Juicebox-Lite before purchasing Juicebox-Pro.

However, I would not recommend trying to stack a navigation banner on top of a gallery. Instead, I would try to keep both elements separate and have the navigation banner above the gallery, like in the View Resizable Gallery with Top Menu Example. In the example, the header is given a fixed height and the gallery fills the remainder of the browser window (without the need for any scrollbars).
You could view the source of the web page in a browser and copy or modify the code to suit your own needs.

I hope these notes are helpful.