ThemeKit UI Hero Eclipse

The image is imserted in three sizes with an optional header and action tab with tooltip on hover/tap.
The overlay slides in when the ation tab is clicked/tapped. It can slide in fromt the left or right and up or down.

Overlay

The overlay has controls for setting its background color and opacity and …

• A centred content panel with max width setting
• Panel image inserted in two sizes with lazy loading
• Content heading, optional styled span, text and an optional internal link
• Content panel border with and color controls

Scripts

The external minified styleaheet contains most of the styles for maximum efficiency. The custom animations are included in the stylesheet.
The custom jQuery plugin is inserted via a minified script.

Similar Products Display

E-commerce websites opten have a few images near the bottom of the page configured as links to similar items. Although the ThemeKit UI Image Scoller would serve this function using an click to show/hide item gives the visitor the opportunity to interact with the page content and reduces the on load content for the benefit of small mobile device users.

Active Scroll

The bar has a two column grid layout with a text field and an animated show/hide icon. The wholelength of the bar acts as the trigger.
The scroll section is visible on the EverWebeb design canvas for editing. It is centered with a mx width setting.
It has a max width setting and the image width can be reduced for mobile phones if required.
On computers the images scroll horizontally when the mouse/trackpad is scrolled vertically.. This is indicated by the ns-resize cursor. The horizontal scrollbar can be styled for thumb color.
On touch devices the images swipe horizontally/

Scroll Items

The items in the scroller have …

• Controls for image width & phone width
• Alt text attribute& lazy load option
• Caption font size with shared controls for captio/icon color & background
• Controls for border width, color and radius
• Scroller background & its opacity
• Item horizontal spacing control

Show/Hide Animation

The scroll images animate in and out on click/tap with a rotate X animation with preset animate in and out times.