Slider with one image and thumbs operating as bullets.
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.
Panel auto width [panel_auto_width]
If set, the panel width will be determined automatically. If not set, you can configure it from the CSS class for the Panels container.
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 - Panels container [class_panels_container]
Sets the CSS class for the container of the panels with the images.
If not set, the system will use "ps_viewer_slideone_tba_panels_container".
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 - Thumbnails container [class_thumbs_container]
Sets the CSS class for the container of the thumbnails.
If not set, the system will use "ps_viewer_slideone_tba_thumbs_container".
CSS class - Thumbnail [class_thumb]
Sets the CSS class for each thumbnail.
If not set, the system will use "ps_viewer_slideone_tba_thumb".
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".
CSS class - Thumbnail spacer [class_thumb_spacer]
Sets the CSS class for the spacer between thumbnails.
If not set, the system will use "ps_viewer_slideone_tba_thumb_spacer".
Thumbnail bar position [thumb_position]
• Hide [hide] Hides the thumbnail bar.
• Inner top left [inner_top_left] Shows the thumbnail bar in the top-left corner, inside the gallery container.
• Inner top center [inner_top_center] Shows the thumbnail bar in the top-center area, inside the gallery container.
• Inner top right [inner_top_right] Shows the thumbnail bar in the top-right corner, inside the gallery container.
• Inner bottom left [inner_bottom_left] Shows the thumbnail bar in the bottom-left corner, inside the gallery container.
• Inner bottom center [inner_bottom_center] Shows the thumbnail bar in the bottom-center area, inside the gallery container.
• Inner bottom right [inner_bottom_right] Shows the thumbnail bar in the bottom-right corner, inside the gallery container.
• Outer top left [outer_top_left] Shows the thumbnail bar in the top-left corner, over the gallery container.
• Outer top center [outer_top_center] Shows the thumbnail bar in the top-center area, over the gallery container.
• Outer top right [outer_top_right] Shows the thumbnail bar in the top-right corner, over the gallery container.
• Outer bottom left [outer_bottom_left] Shows the thumbnail bar in the bottom-left corner, under the gallery container.
• Outer bottom center [outer_bottom_center] Shows the thumbnail bar in the bottom-center area, under the gallery container.
• Outer bottom right [outer_bottom_right] Shows the thumbnail bar in the bottom-right corner, under 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
Note: This setting is valid when the thumbnail bar position is in the inner top-left, top-right, bottom-left or bottom-right corner.
Thumbnail bar offset Y [thumb_offset_y]
The Y offset, in pixels, of the thumbnail bar from the edge of the container.
Default: 10
Note: This setting is valid when the thumbnail bar position is in the inner top-left, top-right, bottom-left or bottom-right corner.
This viewer needs some support from CSS. Here is an example set up:
.ps_viewer_slideone_tba {
}
.ps_viewer_slideone_tba_thumbs_container {
display: block;
}
.ps_viewer_slideone_tba_panels_container {
margin: 0px auto 0px auto;
overflow: hidden;
}
.ps_viewer_slideone_tba_panel {
text-align: center;
}
.ps_viewer_slideone_tba_thumb_spacer {
width: 10px;
height: 1px;
}
.ps_viewer_slideone_tba_thumb,
.ps_viewer_slideone_tba_thumb_sel {
cursor: pointer;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
background: url(images/thumb_norm.png) no-repeat left top;
}
.ps_viewer_slideone_tba_thumb_sel {
background: url(images/thumb_sel.png) no-repeat left top;
}
.ps_viewer_slideone_tba_thumb:hover {
background: url(images/thumb_hover.png) no-repeat left top;
}