Note: JuiceBox has been discontinued and replaced by the stack Ice Box.

[Click here to download a demo file.]

Basic Setup:

Step 1:

Double Click the juiceBox_Container and juiceBox_Inner stacks to install them.

Step 2:

Restart RapidWeaver so that all changes take place.

Step 3:

Drag a juiceBox Container onto your page.

Step 4:

Drag and drop at least one juiceBox Inner stack into the Container.

Step 5:

Drag any stacks, images, or text into the thumbnail area and fullscreen area.

Note:

A gallery will be organized by juiceBox Containers. You should not put a Container inside of another Container. However, you may put any other stacks inside of a juiceBox Container.

Definition of terms:

juiceBox Container:

FullScreen Background:

Color:
Determines the color of the background overlay that pops up when you click on an image.
Opacity:
Determines the transparency of the background overlay that pops up when you click on an image.
0 for completely transparent, 100 for completely opaque.
Animations:
When checked, animations are turned on. When unchecked, animations are turned off.

Button Options:

Button Styles:
Choose which set of buttons you’d like to use, you will see the buttons change in preview mode as you select them.
Color1:
For all ‘flat’ buttons, this will determine the color of the buttons, for all ‘gradient’ buttons it will determine the outer color.
Color2:
For all ‘gradient’ buttons it will determine the inner color.
Opacity:
Determines the transparency of the buttons.
0 for completely transparent, 100 for completely opaque.
Hover Opacity:
Determines the transparency of the buttons when the mouse hovers over them.
0 for completely transparent, 100 for completely opaque.
Size Units:
Control the size of the buttons with either pixels or percentages.
Close Size:
Control the size of the Close button with the specified units.
Navigation Size:
Control the size of the Navigation buttons with the specified units.

juiceBox Inner:

General Options:

Override Settings:
When checked, copies all the customization options of this juiceBox inner to every other juiceBox inner on the page. Saves a lot of time when all of your images need the same treatment.
Hide Thumbnail Preview:
When checked, hides the thumbnail preview in edit mode, does not affect live mode. Saves space in edit mode, and increases performance.
Hide FullScreen Preview:
When checked, hides the fullscreen preview in edit mode, does not affect live mode. Saves space in edit mode, and increases performance.

Thumbnail Options:

Size Units:
Control the size of the thumbnail with either pixels or percentages.
Auto Width:
When checked, the ‘Width’ is ignored and the thumbnail expands as content fills it.
Auto Height:
When checked, the ‘Height’ is ignored and the thumbnail expands as content fills it.
Width:
Controls the width of the thumbnail in the specified units.
Height:
Controls the height of the thumbnail in the specified units.
Units(min/max):
Control the min and max size of the thumbnail with either pixels or percentages.
Max-Width:
Sets the maximum allowed width for the thumbnail. If ‘Width’ is set to 90%, ‘Max-Width’ is set to 800px, and the screen is 1440px wide, the thumbnail will not be 1296px(90% of 1440) instead it will stop expanding at 800px.
Max-Height:
Sets the maximum allowed height for the thumbnail. If ‘Height’ is set to 90%, ‘Max-Height’ is set to 200px, and the content is 500px tall, the thumbnail will not be 450px(90% of 500) instead it will stop expanding at 200px.
Min-Width:
Sets the minimum allowed width for the thumbnail. If ‘Width’ is set to 100px, but ‘Min-Width’ is set to 200px, the thumbnail will be 200px wide.
Min-Height:
Sets the minimum allowed height for the thumbnail. If ‘Height’ is set to 100px, but ‘Min-Height’ is set to 200px, the thumbnail will be 200px tall.

FullScreen Options:

Size Units:
Control the size of the fullscreen with either pixels or percentages.
Auto Width:
When checked, the ‘Width’ is ignored and the fullscreen expands as content fills it.
Auto Height:
When checked, the ‘Height’ is ignored and the fullscreen expands as content fills it.
Width:
Controls the width of the fullscreen in the specified units.
Height:
Controls the height of the fullscreen in the specified units.
Units(min/max):
Control the min and max size of the fullscreen with either pixels or percentages.
Max-Width:
Sets the maximum allowed width for the fullscreen. If ‘Width’ is set to 90%, ‘Max-Width’ is set to 800px, and the screen is 1440px wide, the fullscreen will not be 1296px(90% of 1440) instead it will stop expanding at 800px.
Max-Height:
Sets the maximum allowed height for the fullscreen. If ‘Height’ is set to 90%, ‘Max-Height’ is set to 200px, and the content is 500px tall, the fullscreen will not be 450px(90% of 500) instead it will stop expanding at 200px.
Min-Width:
Sets the minimum allowed width for the fullscreen. If ‘Width’ is set to 100px, but ‘Min-Width’ is set to 200px, the fullscreen will be 200px wide.
Min-Height:
Sets the minimum allowed height for the fullscreen. If ‘Height’ is set to 100px, but ‘Min-Height’ is set to 200px, the fullscreen will be 200px tall.