ImagePack
Capabilities
- Responsive Images that Smoothly Resize
- Two Cool 3D Layout Styles
- Auto-Reveal Images on Hover/Tap
- Image Gallery for Mobile & Desktop
- Large Image Auto-Sizes to Available Width
- Image Drop-In, Resource & Warehouse Sources
- Thumbnail Overlap & Reveal Distances
- Sizing of Thumbnail Images
- Title Font, Size, Weight, Style, Color, Background & Shadow Controls
- Close Button Size, Color & Shadow Controls
- Optional Google Font
- Optional Wide View in Edit Mode
- Alt Tag for Resources/Warehouse Images
ImagePack Settings
Current Version: 1.1.0
- ➀
Image Style: Select the image style to use
- ➁
Max Width: Set the max width for the thumbnail images based on container width
- ➂
Title Size: Enter the font size for the title
- ➃
Title: Set the title text color
- ➄
Title Shadow: Set the title text shadow color
- ➅
Title Background: Set the title background color
- ➆
Close Size: Enter the font size for the close button
- ➇
Close Button: Set the close button color
- ➈
Close Shadow: Set the close button shadow color
- ➉
Font: Set a web-safe font for the text
- ➀➀
Font Weight: Select the font weight for the text
- ➀➁
Font Style: Select the font style for the text
- ➀➂
Use Google Font: Enable to use a Google font for the text - Note: overrides Font, Font Weight & Font Style
- ➀➃
Google Font: Enter name of Google font for the text (No quotes)
- ➀➄
Google Wt: Only enter Google font weight for the text if it's anything other than normal(400)
- ➀➅
Margin Top: Enter a top margin, Note: use to fix image clipping
- ➀➆
Thumb Overlap: Enter the amount of thumbnail overlap distance, Note: larger values bring the images closer together
- ➀➇
Thumb Revealed: Enter the amount of thumbnail overlap distance after hover/tap animation, Note: smaller values push the images further apart
- ➀➈
Show Wide View: Display wide view in Edit mode (Disable for Publish)
ImagePack Image Settings
(Normally hidden in Library - Add using blue plus button)
Current Version: 1.1.0
- ➀
Image Source: Select the way you wish to use images
- ➁
Image Folders: Select if using Resources or Warehouse - Note: Select 'Not Used' if using Drop In
- ➂
Res. Image: Enter path in resources & name for image, Sim. for Whs. Image
- ➃
Alt. Image Text: Enter alternate image text for image
- ➄
Image Title: Enter title for image
Download the ImagePack Demo - and display those 3D images !
Note: 'ImagePack Demo Version' will appear below the stack, but it's fully functional for you to try out.