Basic Use

Place the Ice Box Container to open a new Ice Box section.

Note that if you want more than one instance of Ice Box to run on a page a single container must wrap around all of the inner Ice Box stacks (you cannot have two separate containers).

Ice Box Container

Place the Ice Box Inner inside the container. Place additional inner pieces for every individual picture.

Ice Box Inner

For all general customization options and fade control options select the container. For inner controls (i.e. Thumbnail image, Large image, Alt tags, description) select the individual inner container. If you’re not sure what a customization options does please use the following definition of terms.

Definition of Terms

General Options

  • Link Images: Active by default this option causes images to connect with each other in order so that the navigation images will work. If disabled the navigation icons are removed.
  • Vache: Active by default this option allows users to click anywhere outside of the image to exit. If you place no Exit/Close icon then users can still exit easily, but if this option is disabled it’s best to include an Exit/Close icon.
  • Overlay Opacity: This sets the opacity of the overlay (background color that appears behind the image). 1.0 will remove any transparency, where 0 will make it completely transparent.
  • Overlay Color: This sets the color of the background color that appears behind the image and in front of the rest of the web page.
  • Text: This sets the color of the text that appears for each individual image (description and number order).
  • Left Image: The left arrow navigation icon (note that this will not appear if it is the first image).
  • Right Image: The right arrow navigation icon (note that this will not appear if it is the last image).
  • Close Image: The close image located in the top left of the image (not entirely necessary when Vache is active).
  • Loading Image: The loading image which displays if the image is loading.

Fade Durations

  • Fade in Overlay: Controls the fade in speed (millaseconds) for the Overlay (background color behind the image).
  • Fade in Image: Controls the fade in image speed (millaseconds) for the image(s).
  • Fade Out Image: Controls the fade out image speedĀ (millaseconds) for image(s) most noticeable when transitioning between images.

Inner Controls

  • Thumbnail: This is the smaller thumbnail image that is displayed to the user before being clicked on.
  • Large Image: This is the larger image that appears after the thumbnail has been clicked on.
  • Description: This is the text that displays below the larger image (field does accept HTML).
  • Image Alt Tag: This is the alternate text that is available for the image and is primarily added only for SEO purposes.

Changelog

v1.0.3 (April 28, 2014)

  • Fixed coding effecting right navigation image

v1.0.2 (January 2, 2014)

  • Fixed Overlay display issue
  • Changed Overlay opacity to a slider (you can click inside the number displayed on the right for fine tuning)