Carousel Slide
This will take any amount of content and slide it back and forth in groups. There are existing carousel implementions but our needs were limited so I built a light version. When a user clicks the navigation button calculations are made to determine distance, which grouping is shown, and which navigation element to disable.
-
Any HTML can go down here. Since the photo is placed dynamically it's easy to manage what happens here since it's already on the page.
-
It's easy to swap out different layouts by passing a class.
The user can interact with any links in the hover box.
Hover Box
When triggered on hover, this will show the user a pop-up box with additional information and a dynamically loaded, larger version of the image. The internal content can be styled and the width controlled by passing CSS classes. The orientation of the hover box will adjust given the space available around it.
Dimmer
This is generally used to show short, important messages for users that require their actions. Calculations are made once, when the dimmer is called, and it's positioned so that it doesn't have to continually monitor browser dimensions to stay centered. Its Achilles' heel is flash objects without wmode so use with caution.