EverWeb Widgetbox

FX Slider

Slide Up Captions & Multiple Transitions

A very versatile slideshow which uses the jQuery Camera plugin.

It has a choice of 28 transition types and one named "random" which does exactly what it says. The transiton time is variable.

The slide up captions can be styled for web safe font, size, text align and. The caption background transparency can be changed.

Any image can be a hyperlink.

There are two sets of controls - pager dots and navigation back/forward arrows with pause/play button. These can be set to various combinations using the show/hide checkboxes.

The slider can be set to autoplay with pause on hover if required and, in this mode, the slide time can be set.

There is a choice of a spinner loader, bar loader or none. The spinner loader is too far advanced for Internet Explorer 8 or older but the bar should work OK.

Slide up captions image links
Slide up captions & twenty nine transitions
This image is a hyperlink
Back/forward arrows & pause/play controls
Show or hide the navigation controls and/or the pager dots
Optional autoplay with pause on hover if required
Slide Up Caption Hyperlink
FX Slider WIdget Settings

Image & Slider Size

IMPORTANT!

Like most of the slideshows, the images obviously all have to be the same size.

It's best to import the images into EverWeb at the same size as the finished slider.

Unlike most of the other slideshow widgets, the images will not maintain their aspect ratio when the slideshow widget is adjusted.

This is because the images are inserted using the HTML5 data attribute and the height cannot be set to "auto" as it would if an HTML <img> tag was used.

Therefore, if the widget is adjusted in width, the height has to be adjusted in proportion. Here's an example...

If the imported size of the image is 960 x 600px and the slideshow is reduced to a width of 800px in EverWeb then the slideshow height needs to be reduced to 500px to maintain the 8:5 aspect ratio.

Preview.app can be used to reduce/increase image files proportionally using "Adjust Size.." in the Tools drop down menu.

To calculate the proportional decrease in slideshow height, one of the images can be opened in preview and the decreased width entered. The application will then show the proportional height for this width to be entered into the Metrics inspector in EverWeb.

Widget Settings

The widget settings are shown to the right.

Choose the images and adjust the slider size proportionally using the Metrics inspector as described above.

Highlight each image file name in turn to enter a caption and also a hyperlink if required.

NOTE: If you don't enter a caption for a slide it will still show the background so captioning each slide is essential. The slider makes no provision for alt text for SEO so a descriptive caption is really a must.

Set the caption font family, size, color, text aligment and caption background opacity.

Choose the transition type and a suitable transition time to suit this.

The first checkbox is for show/hide the navigation.

Check the next one to show the navigation only on hover.

The third checkbox is for show/hide the pager dots.

Check the box next to Autoplay if this is required.

Set the time in seconds that each slide is shown for in autoplay mode.

Check the box if pause on hover is required.

As mentioned earlier, a loader can be set so that the visitor can get an idea of how long the slide will be shown for in autoplay mode.

The pie loader will work in all modern browsers but the bar loader will have to be used if Internet Explorer (v8 and lower) users are to be considered.

Get The Widget