This example shows how to use the dynamic text field feature to display captions for each image. This example utilizes a stand-alone Slideshow component (500x500 pixels). The captions are specified in the XML and the text styles are defined using a cascading style sheet (CSS).
- Add <caption> nodes to the XML - link to example. For example, if your caption node reads:
<caption><![CDATA[<span class="caption">Beautiful Sunset</span>]]></caption>
then the caption will read "Beautiful Sunset " and the style of the text will be determined by the "caption" class in the CSS file. Or if your caption node reads:
<caption><![CDATA[<a href="http://components.earthscienceagency.com" target="_blank">Beautiful Sunset</a>]]></caption>
then the caption will read "Beautiful Sunset" and the text will be clickable; the text style will be determined by the "a:link" class in the CSS file.
- Modify the CSS file to meet your needs and upload it to your server - link to example. The path for the CSS file is set within the XML (e.g. cssurl="captions.css").
- If you do not wish to display a caption for one of your images, simply delete the <caption> node for that image in the XML.
|