1LD Tutorials & Blogs

Tutorials

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.

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software