Captions

{niceslides:width;height;duration;navigation on/off;caption on/off;table of contents on/off;thumbnails on/off|images URL|images URL}

The caption is the title and byline caption that appears at the bottom of the slide. It displays slide specific information to the audience.

You can control whether or not the caption is displayed by entering "true" or "false" into the parameter.

Example
{niceslides:320;240;5000;true;true|images/mercedes-s.jpg;Mercedes S::A powerful expression of individuality.|images/mercedes-cl.jpg;Mercedes CL::Exclusive in audience and extraordinary in every way.}

Please keep in mind that in order for the caption feature to operate properly, you need to set the title::byline values for each image in the slide show. The caption title and byline text are pulled from these values.

In addition to turning the caption feature on and off, there are several other properties that you can set in the tag syntax. These properties include caption opacity, background fill color, title text color and byline text color. Here is the syntax for setting all values for the caption parameters.

Syntax
;captions on/off,opacity,background color,title color,byline color

Example
{niceslides:320;240;5000;true;true,0.8,#000962,#fff,red|images/mercedes-s.jpg|images/mercedes-cl.jpg}

The opacity is set in terms of a decimal or float value. 1.0 is equal to 100%, where as 0.5 is the equivalent of 50% opacity.

The color values can be designated as hexadecimal or keyword values. When setting a color as a hexadecimal value you must include the number symbol in the value. For example to designate a black value you would enter "#000000". To designate a black value by keyword you would enter "black".

Notice that the additional values are separated by comas. To exclude a value leave it blank. If the value(s) are at the end of the syntax string you can leave them out entirely.

Example
{niceslides:320;240;5000;true;true,,#000962,#fff,red|images/mercedes-s.jpg|images/mercedes-cl.jpg}

Or

{niceslides:320;240;5000;true;true,0.8|images/mercedes-s.jpg|images/mercedes-cl.jpg}

Sidebar & Table of Contents Menu

{niceslides:width;height;duration;navigation on/off;caption on/off;table of contents on/off;thumbnails on/off|images URL|images URL}

The sidebar table of content displays a list of all image titles contained in the slide show. In addition, all listed titles are linked to the slides that they represent. When the viewing audience clicks on a title that appears in the sidebar the slide show will display the correlating image.

You can control whether or not the sidebar is displayed by entering "true" or "false" into the parameter.

Example
{niceslides:320;240;5000;true;true;true|images/mercedes-s.jpg;Mercedes S|images/mercedes-cl.jpg;Mercedes CL}

Please keep in mind that in order for the sidebar table of contents feature to operate properly, you need to set the title values for each image in the slide show. The sidebar table of contents title list text is pulled from these values.

In addition to turning the table of contents feature on and off, there are several other properties that you can set in the tag syntax. These properties include the sidebar width, background color, background image URL, background image repeat pattern, text color and active text color.

It is important to understand that the sidebar width adds to the total slide show width. For example, if you have specified a slide show width of 320 pixels and a sidebar width of 170 pixels, the total width of the slide show will be 490 pixels. This is an important detail to remember when planning your page layout.

Here is the syntax for setting all values for the sidebar table of contents parameters.

Syntax
;table of contents on/off,width,background color,background image,image repeat,text color,active text color

Example
{niceslides:320;240;5000;true;true;true,170,#ccc,images/custombackground.png,repeat-x,#00ff00,blue|images/mercedes-s.jpg|images/mercedes-cl.jpg}

The width value is always set in pixels. Only numerical values are allowed in the width field.

The background color values can be designated as hexadecimal or keyword values. When setting a color as a hexadecimal value you must include the number symbol in the value. For example to designate a black value you would enter "#000000". To designate a black value by keyword you would enter "black".

The background image URL must be a valid URL that points to the location of your background image. In addition, you may enter the word "none" to exclude the usage of a background image.

Example
{niceslides:320;240;5000;true;true;true,170,#ccc,none,,#00ff00,blue|images/mercedes-s.jpg|images/mercedes-cl.jpg}

The background image repeat property has to be entered as a valid CSS background-repeat property. Possible entries are "repeat", "repeat-x", "repeat-y" and "no-repeat".

The text color designation controls the color value of the text displayed in the table of contents list. Color values may be entered as hexidecimal, e.g. "#fff" or as a keyword, e.g. "white".

Likewise the active text color designation controls the color value of active text in the list, text that is highlighted or actively hovered over.

Notice that the additional values are separated by comas. To exclude a the width you can leave it out entirely.

Example
{niceslides:320;240;5000;true;true;true|images/mercedes-s.jpg|images/mercedes-cl.jpg}

Thumbnails Menu

{niceslides:width;height;duration;navigation on/off;caption on/off;table of contents on/off;thumbnails on/off|images URL|images URL}

The thumbnails menu displays a visual menu of thumbnails at the bottom of the slide show. Each image in the slide show is represented by a smaller copy of itself. When the viewing audience clicks on a thumbnail that appears in the menu the slide show will display the correlating image.

You can control whether or not the thumbnail menu is displayed by entering "true" or "false" into the parameter.

Example
{niceslides:320;240;5000;true;true;true;true|images/mercedes-s.jpg;Mercedes S|images/mercedes-cl.jpg;Mercedes CL}

In addition to turning the thumbnails menu feature on and off, there are several other property that you can set in the tag syntax. These options include the thumbnails width & height , margin space between thumbnails, an inactive thumbnails opacity.

It is important to understand that the thumbnails menu height adds to the total slide show height. For example, if you have specified a slide show height of 240 pixels and thumbnail height of of 50 pixels, plus a margin of 1 pixel, the total height of the slide show will be 292 pixels.

If you have your thinking cap on, you might be thinking, "Don't you mean 291px." (240+1+50). Actually, no. The margin is automatically doubled between the slide display and the first row of thumbnails. After which, consecutive rows of thumbnails will be spaced by a single margin height. Provided you have enough images in your slide show to create a second row of thumbnails, the total height will be 343 pixels (240+2+50+1+50).

Here is the syntax for setting all values for the sidebar table of contents parameters.

Syntax
;thumbnails on/off,width,height,margin,opacity

Example
{niceslides:320;240;5000;true;true;true;true,75,50,3,0.7|images/mercedes-s.jpg|images/mercedes-cl.jpg}

The width, height and margin values are always set in pixels. Only numerical values are allowed in these field.

The opacity is set in terms of a decimal or float value. 1.0 is equal to 100%, where as 0.5 is the equivalent of 50% opacity.

Keep in mind that these setting set the value for all thumbnails.

Notice that the additional values are separated by comas. To exclude a value leave it blank. If the value(s) are at the end of the syntax string you can leave them out entirely.

Example
{niceslides:320;240;5000;true;true;true;true,,,3,0.7|images/mercedes-s.jpg|images/mercedes-cl.jpg}

Or

{niceslides:320;240;5000;true;true;true;true,75,50|images/mercedes-s.jpg|images/mercedes-cl.jpg}

CSS Suffix Override

{niceslides:width;height;duration;navigation on/off;caption on/off;table of contents on/off;thumbnails on/off;CSS suffix override|images URL|images URL}

The CSS suffix override feature provides a method to manually override the default CSS that is generated by the extension. This feature provides the benefit of allowing developers to customize the CSS for individual slide shows.

It very important to understand that this is an advanced feature and should only be used by individuals who have a firm understanding of CSS and HTML coding.

Example
{niceslides:320;240;5000;true;true;true;true;-mysuffix|images/mercedes-s.jpg|images/mercedes-cl.jpg}

To override the default CSS with a custom CSS, enter the default CSS suffix

Suffix Example
-mysuffix

CSS example
niceslides-wrap-0-mysuffix

The custom CSS needs to be manually included with the template.

There has to be a unique set of CSS definitions for each slide show per page. For example, if you include 2 slide shows on a page then there has to be 2 complete slide show CSS sets, i.e. niceslides-wrap-0-SUFFIX & niceslides-wrap-1-SUFFIX.

Note the numbering in the example, all numbering starts with 0. The dynamic value replacement used by the extension's internal CSS generator ( i.e. %totalWidth% ) will not take effect with this custom CSS technique.

Tinkering with the Default CSS

The default CSS is exposed in the Plugin Manager for the Nice Slide Show. This was done in order to allow for global customization to all slide shows displayed on a site.

For the most part the CSS found in the Nice Slide Shows plugin parameters is standard CSS. However, the extension does a large amount of auto-dynamic layout adjustments. Many of these dynamic values are reflected in the exposed default CSS as keywords. You will see the keywords represented with a specific syntax.

Syntax
%keyword%

Example
%totalWidth%

When making adjustments to the CSS, you have the option to use the keywords or to override them with a static value of your choosing.

Here is a handy list of all the auto-dynamic keywords used and their correlating values.

Keyword = Value

%count% = slide show count, increments with each slide show displayed per page

%totalWidth% = total width of slide show plus optional sidebar

%wrapHeight% = total slide show height plus optional thumbnail margins and thumbnail container height

%slideWidth% = width of slide image area

%slideHeight% = height of slide image area

%navTopPos% = top position of navigation controls in pixels

%navWidth% = width of navigational control graphic

%navHeight% = height of navigational control graphic

%navNextImg% = URL of graphic to be used for the navigation control next button

%navPreviousImg% = URL of graphic to be used for the navigation control previous button

%captionBackgroundColor% = caption background color value

%captionTitleColor% = caption title color value

%captionBylineColor% = caption byline color value

%thumbnailContainerMargin% = thumbnail container margin

%thumbnailContainerHeight% = thumbnail container height including multiple thumbnail rows

%thumbnailInnerWidth% = thumbnail inner wrapper width

%thumbnailWidth% = thumbnail width

%thumbnailHeight% = thumbnail height

%thumbnailMargin% = margin between thumbnails

%sidebarWidth% = sidebar width

%sidebarHeight% = sidebar height

%sidebarBackgroundColor% = sidebar background color value

%sidebarBackgroundImage% = sidebar background image

%sidebarBackgroundRepeat% = sidebar background image repeat property

%sidebarTextColor% = sidebar text color

%sidebarActiveTextColor% = sidebar active text color

%tableOfContentsWidth% inner table of contents width which currently equlas the same as the sidebar width