EverWeb Widgetbox

T Slide

Slideshow With Separate Thumbnail Container

The slideshow has a separate thumbnail container which can be placed anywhere.

Two widgets are used to create this slider - one for the image slideshow and the other for the thumbnails. This means that the thumbs can be placed anywhere on the page and can also be horizontal or vertical.

Each image in the slider has alt text for SEO and a caption. Any image can be a hyperlink which can be set to open in a new window.

The thumbnail images also have alt text so the search engine spiders will love this one.

  • Slideshow with captions

    Caption Slideshow

  • Styled caption adjustable background opacity

    Styled captions with adjustable background opacity

  • Image hyperlink

    This image is a hyperlink

  • hyperlink new window

    This image is a hyperlink to open in a new window

  • Separate thumbnail container horizontal vertical

    Separate thumbnail container can be placed anywhere on the page

  • T slide thumbnail image
Carousel SLideshow alt text caption links
Carousel Thumbnail Slideshow Caption Links
T slide widget slideshow
T slide widget slideshow

Image Preparation

The EverWeb default Slider and Gallery derive the thumbnail images from the full size ones. This makes it easy for the beginner to create a slideshow but results in a very inefficient and slow downloading web page.

This slideshow is for those who want to create something better and are prepared to spend a little time preparing the images correctly and making the end result more interesting for both human visitors and the search engine spiders.

Decide before hand what size the slideshow is going to be. That will decide the image size and aspect ratio.

Crop out square thumbnails no more than about 100px square.

Name the images and their corresponding thumbnail in sequence like those shown in the screenshot of the widget settings. This will make them far easier to find in the Assets List.

As always, make sure the file names have no spaces or special characters in them.

Slideshow

Drag the T Slide-1 widget onto the page, select the images and adjust the widget size to suit.

Select each image file in turn and add the caption and alt text.

Enter a relative or absolute file path if the image is to be a hyperlink. See THIS page for more info.

Check the box if the hyperlinked page or file is to open in a new window.

Choose the caption styles and adjust the caption background opacity to suit.

Thumbnail Container

Drag the T Slide-2 widget onto the page and select the thumbnails.

Select each thumbnail file in turn and enter alt text for SEO.

Adjust the thumbnail width to the required size. The height will adjust automatically.

The thumbnail arrangement can be adjusted by dragging the widget around. They can be orientated horizontally or vertically and can also be placed in rows if required.

Experiment with this to get it right with the desired alignment.

For vertical thumbs, the widget should be a little wider than the thumbs but not so much that the bottom thumb starts to wander out of alignment.

Get The Widget

Important Note!

Since T Slide is actually two sliders connected by javascript, never try to insert more than one slider per page and avoid using it on the same page as other advanced widgets such as tabs, accordion and media players.