Slide One TNA [slideone_tna] - Photo Spot Viewer

Slider with one image and thumbs operating as numbers.

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_tna".

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_tna_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_tna_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_tna_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_tna_button" the system automatically creates the class "ps_viewer_slideone_tna_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

Example CSS

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

.ps_viewer_slideone_tna_panel {
	text-align: center;
}

.ps_viewer_slideone_tna_button,
.ps_viewer_slideone_tna_button_sel {
	display: inline;
	margin-left: 5px;
	border: 1px solid #b6d169;
	background-color: #738f22;
	padding: 2px 5px 2px 7px;
	color: #fff;
	font-size: 12px;
}

.ps_viewer_slideone_tna_button_sel {
	border: 1px solid #fff;
}

.ps_viewer_slideone_tna_button:hover,
.ps_viewer_slideone_tna_button_sel:hover {
	background-color: #607620;
}