Dreamweaver Extensions

Working with XML content

Open the gallery.xml file in Dreamweaver (File -> Open), to change the content of your gallery. Also, you can open the XML content file through FlashDevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Flash Image Scroller). After that, in the category of 'General', click the 'Edit' button near the 'Source' field.

The following example shows the basic structure of the content XML file:

<?xml version="1.0" encoding="utf-8"?> 
<gallery>
   <category caption="Category 1">
      <img caption="Caption 1" src="photos/photo01.jpg" link="empty.html" target="_self" description="Short description 1">
         <description>
            <![CDATA[ HTML description 1 ]]>
         </description>
      </img>
      <img caption="Caption 2" src="photos/photo02.jpg" link="empty.html" target="_blank" description="Short description 2">
         <description>
            <![CDATA[ HTML description 2 ]]>
         </description>
      </img>
   </category>
   <category caption="Category 2">
      <img caption="Caption 1" src="photos/photo01.jpg" link="empty.html" target="_self" />
      <img caption="Caption 2" src="photos/photo02.jpg" link="empty.html" target="_blank" />
   </category>
   <category caption="Category 3">
      <img caption="Caption 1" src="photos/photo01.jpg" description="Short description 1" />
      <img caption="Caption 2" src="photos/photo02.jpg" description="Short description 2" />
   </category>
</gallery>

In this example, parent <gallery> tag contains three child tags <category>. Each category has 2 tags <img>.

The first category has its own category description. Each photo from this category has thumbnail caption, path to image, link, target and image description in popup window. And a special HTML description. Link and target work when thumbOnClick or markerOnClick stands in "Get Link" value. Description is shown when thumbOnClick or markerOnClick stands in "Description" value. Also there is a special tag <description> with <![CDATA[...]]> symbols. They are used when you want to insert any HTML code into description. (see our Example)

The second category has its own category description. Each photo from this category has thumbnail caption, path to image, link and target. Link and target work when thumbOnClick or markerOnClick stands in "Get Link" value. There is no image description in popup window.

The third category has its own category description. Each photo from this category has thumbnail caption, path to image, and image description in popup window. Description is shown when thumbOnClick or markerOnClick stands in "Description" value. There are no link and target.

<gallery>

Description
Main tag and contains image categories of the image scroller.

<category>

Description
Contains captions, paths and descriptions of the images in this category.

Attributes

  • category caption, The caption of the category.

<img>

Description
Contains the path to the image file and description of this image.

Attributes

  • caption, The caption of the thumbnail.
  • src, The absolute or relative URL of the image file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.
  • link, The URL from which to obtain the document.
  • target, Specifies the window or HTML frame into which the document should be loaded. You can enter the name of a specific window or select from the following reserved target names:
    • _self specifies the current frame in the current window.
    • _blank specifies a new window.
    • _parent specifies the parent of the current frame.
    • _top specifies the top-level frame in the current window.
  • description, The short description of the image. Short description is located in the popup window with enlarged image.

<description>

Description
Contains the HTML description of the selected image. Description use a special symbols <![CDATA[...]]> to save the content in the HTML format. Tag <description> is used together with the adjustment parameters of the component descriptionTagId and descriptionTargetWindow. So the HTML content puts into HTML tag with the ID (for example: <div id="descriptionTagId"></div>), which ID is specified in descriptionTagId in UI. Also you need to set up one of the parameters thumbOnClick or markerOnClick in the value 'Description'.