EverWeb Widgets

Media Header Lightbox Slideshow

Media Header Lightbox Widget A

This item uses two widgets - one to create the image header and the other the lightbox slideshow. The slideshow is opened by clicking/tapping the centered play button.
The responsive header has a full size background image which can be set to a fixed height. There is the option to set a different height on mobile phones or both can be set to viewport height.
Images
The widget loads different sizes of images for each device type - computer, tablet and phone - for increased efficiency and faster download times on touch devices.
Header
The overlay header has an h1 heading and an optional logo and has adjustable height. The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It can be adjusted for font size, color, style and weight and letter spacing. The background color has an opacity slider.
Logo
The optional logo is positioned top left and has controls for adjusting its size and its position relative to the top and left.
Play Button
The centered play button has options for changing the color, setting the hover color and showing a title on hover when viewed on computers.
h2 Heading
The optional h2 heading overlays the bottom of the image. The text is centered and it inherits the font family, color and background color from the main heading. The font size is adjustable computer/tablet and there is a separate mobile setting.

Media Header Lightbox Widget B

The widget which creates the lightbox slideshow appears on the EverWeb design canvas as a full width, 20px in height item. This can be ignored except for clicking it to show the widget settings. It will not be visible on the published page.
Images
The remaining images can be dragged onto the Assets List in the widget settings panel and each file name selected in turn to add the caption. Even if captions are not being displayed, descriptive text for the search engines should be entered in the caption field since this text is derived from the image's alt text attribute.
The slideshow is responsive and the maximum width that an image will be displayed is equal to the image file width. In other words, if the images are to be displayed at 1200px at a wide browser setting, then the image file should be 1200px wide.
Controls
Although displaying images with varying aspect ratios looks decidely tacky and amateurish, it is possible to do this. There are slider controls for adjusting the slideshow stage's width and height ratios to arrive at a compromise between width and height.
There are checkboxes for showing the slide counter, captions and for showing the navigation arrows on mobile phones. The arrows are not really required on these devices as the slides can be navigated by swiping.
The slide transition time and the caption animation delay can be adjusted and are set in milliseconds.
There is an option to add a border to the slideshow images if required.

Navigation

Research has shown that a vertical navigation is easier to read and use and is more likely to encourage visitors to click through to other pages of the site.
The Media Header Navigation one can be positioned left or right and switches to a location below the image when viewed on mobile phones.
The links can be styled for font size, color, hover color, background color and its opacity and vertical spacing.
The navigation background color can be set for mobile use since this needs to be a solid color.
Current Page Indicator
The current page link can be indicated using a contrasting color to the link text. This is achieved by using a jQuery plugin to create an active class for the current page.
Navigation Position
It is important to insert the navigation menu in the correct place on the EverWeb design canvas. In this example, the navigation widget is placed immediately after the header widget and before the info bar if inserted.
If the the info bar is set to overlay the header image, it is placed immediately below the header and the navigation is inserted below it.