Slide One TBA [slideone_tba] - Photo Spot Viewer

Slider with one image and thumbs operating as bullets.

Parameters

Animation speed   [speed]
Progress increment for an animation frame.
Valid values: 1 - 100
Default: 10

Idle seconds   [idle_secs]
Seconds of user inactivity until the system automatically shows the next image.
To disable the automatic advancement to the next image, set it to 0.
Default: 10

Width   [width]
The container width in pixels.
If this field is not set, the system will use the width of its environment.

Height   [height]
The container height in pixels.
If this field is not set, the system will use the height of the largest element in the image list.

CSS class - Container   [class_container]
Sets the CSS class for the container of the image gallery.
If not set, the system will use "ps_viewer_slideone_tba".

CSS class - Panel   [class_panel]
Sets the CSS class for the panel that works as a wrapper for each element.
If not set, the system will use "ps_viewer_slideone_tba_panel".

CSS class - Image   [class_img]
Sets the CSS class for the image tag of each element.
If not set, the system will use "ps_viewer_slideone_tba_img".

CSS class - Button   [class_button]
Sets the CSS class for each button in the thumbnail bar.
If not set, the system will use "ps_viewer_slideone_tba_button".

Notice: The system uses a different CSS class for the button that represents the current image. It automatically adds a "_sel" to the CSS class for the regular button. So, for example, if the CSS class for the regular button is "ps_viewer_slideone_tba_button" the system automatically creates the class "ps_viewer_slideone_tba_button_sel". And if the CSS class for the regular button is "my_class" the system automatically creates the class "my_class_sel".

Thumbnail bar position   [thumb_position]
Hide [hide] Hides the thumbnail bar.
Top - Left [top_left] Shows the thumbnail bar in the top-left corner of the gallery container.
Top - Right [top_right] Shows the thumbnail bar in the top-right corner of the gallery container.
Bottom - Left [bottom_left] Shows the thumbnail bar in the bottom-left corner of the gallery container.
Bottom - Right [bottom_right] Shows the thumbnail bar in the bottom-right corner of the gallery container.

Thumbnail bar offset X   [thumb_offset_x]
The X offset, in pixels, of the thumbnail bar from the edge of the container.
Default: 10

Thumbnail bar offset Y   [thumb_offset_y]
The Y offset, in pixels, of the thumbnail bar from the edge of the container.
Default: 10

Thumbnail button width   [thumb_width]
The thumbnail button width in pixels.

Thumbnail button height   [thumb_height]
The thumbnail button height in pixels.

Example CSS

This viewer needs some support from CSS. Here is an example set up:

.ps_viewer_slideone_tba_panel {
	text-align: center;
}

.ps_viewer_slideone_tba_button,
.ps_viewer_slideone_tba_button_sel {
	display: inline;
	margin-left: 5px;
	width: 11px;
	height: 11px;
	background: url(../images/ps_viewer_slideone_tba_normal.png) no-repeat left top;
}

.ps_viewer_slideone_tba_button_sel {
	background: url(../images/ps_viewer_slideone_tba_selected.png) no-repeat left top;
}

.ps_viewer_slideone_tba_button:hover {
	background: url(../images/ps_viewer_slideone_tba_hover.png) no-repeat left top;
}