Slider with one image and thumbs appearing in a panel.
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_tpa".
CSS class - Panel [class_panel]
Sets the CSS class for the panel that works as a wrapper for each image.
If not set, the system will use "ps_viewer_slideone_tpa_panel".
CSS class - Thumbnail bar background [class_thumbs_back]
Sets the CSS class for the background of the thumbnail bar.
If not set, the system will use "ps_viewer_slideone_tpa_thumbs_back".
CSS class - Thumbnail [class_thumb]
Sets the CSS class for each thumbnail.
If not set, the system will use "ps_viewer_slideone_tpa_thumb".
Notice: The system uses a different CSS class for the thumbnail that represents the current image. It automatically adds a "_sel" to the CSS class for the regular thumbnail. So, for example, if the CSS class for the regular button is "ps_viewer_slideone_tpa_thumb" the system automatically creates the class "ps_viewer_slideone_tpa_thumb_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_tpa_thumb_spacer".
CSS class - Previous Image [class_arrow_prev]
Sets the CSS class for the arrow that selects the previous image.
If not set, the system will use "ps_viewer_slideone_tpa_arrow_prev".
CSS class - Next Image [class_arrow_next]
Sets the CSS class for the arrow that selects the next image.
If not set, the system will use "ps_viewer_slideone_tpa_arrow_next".
CSS class - Mask [class_mask]
Sets the CSS class for the mask that appears over the images.
If not set, the system will use "ps_viewer_slideone_tpa_mask".
Show previous/next arrows [prevnext_arrows]
If enabled the system shows two arrows for helping the user move to the previous or the next image.
Default: 1
Thumbnail bar position [thumb_position]
• Hide [hide] Hides the thumbnail bar.
• Top [top] Shows the thumbnail bar in the top of the gallery container.
• Bottom [bottom] Shows the thumbnail bar in the bottom of the gallery container.
Thumbnail bar opacity level [thumb_opacity]
The opacity of the of the thumbnail bar.
Valid values: 1 (transparent) - 100 (solid)
Default: 60
Thumbnail bar top padding [thumb_padding_v1]
The top padding in pixels of the thumbnails in the thumbnail bar.
Default: 10
Thumbnail bar bottom padding [thumb_padding_v2]
The bottom padding in pixels of the thumbnails in the thumbnail bar.
Default: 10
Thumbnail bar left/right padding [thumb_padding_h]
The left/right padding in pixels of the thumbnails in the thumbnail bar.
Default: 10
Hide helpers seconds [helper_secs]
Seconds of user inactivity until the system automatically hides the thumbnail bar.
To disable the automatic hide effect of the thumbnail bar, set it to 0.
Default: 2
This viewer needs some support from CSS. Here is an example set up:
.ps_viewer_slideone_tpa_panel {
text-align: center;
}
.ps_viewer_slideone_tpa_mask {
background: url(images/mask.png) no-repeat left top;
width: 600px;
height: 400px;
}
.ps_viewer_slideone_tpa_thumbs_back {
background-color: #fff;
}
.ps_viewer_slideone_tpa_thumb_sel {
border: 4px solid #444;
}
.ps_viewer_slideone_tpa_thumb {
border: 4px solid #fff;
}
.ps_viewer_slideone_tpa_thumb_spacer {
width: 13px;
height: 1px;
}
.ps_viewer_slideone_tpa_arrow_prev {
background: url(images/arrow_prev.png) no-repeat left top;
width: 44px;
height: 88px;
cursor: pointer;
}
.ps_viewer_slideone_tpa_arrow_next {
background: url(images/arrow_next.png) no-repeat left top;
width: 44px;
height: 88px;
cursor: pointer;
}