Working with XML content

PREV
NEXT

To change the content of your gallery you can use FlashDevlopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> XML Grid Gallery -> 'Image list') OR you can edit the content directly in gallery.xml file in Dreamweaver (File -> Open).

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

<?xml version="1.0" encoding="utf-8"?>
<gallery>
  <category caption="CATEGORY 01">
    <item caption="Photo 01" image="gallery_files/photos/01/photo01.jpg" description="DESCRIPTION 1" />
    <item caption="Photo 02" image="gallery_files/photos/01/photo02.jpg" description="DESCRIPTION 2" />
    <item caption="Photo 03" image="gallery_files/photos/01/photo03.jpg" video="videos/video.flv" />
  </category>
  <category caption="CATEGORY 02">
    <item caption="Photo 01" image="gallery_files/photos/02/photo01.jpg" tip="TIP 1" link="empty.html" target="_blank" />
    <item caption="Photo 02" image="gallery_files/photos/02/photo02.jpg" tip="TIP 2" link="empty.html" target="_blank" />
  </category>
</gallery>

In this example, parent <gallery> tag contains 2 child tags <category>. Each item inside category represents as an image. All these items are differ only in additional attributes.

For example, first and second image in the first category have following attributes: caption - caption="Photo 01", link to image - image="gallery_files/photos/01/photo01.jpg" and description - description="DESCRIPTION 1". Third item represents as video file video="videos/video.flv" with caption - caption="Photo 03" and thumbnail - image="gallery_files/photos/01/photo03.jpg".

Images in the second category have additional attributes like tip - tip="TIP 1" and hyperlink - link="empty.html" target="_blank".

<gallery>

Description

Main tag and contains the description of the image gallery.

<category>

Description

Contains images of this category. Descriptions of the images represented as tags <item>.

Attributes

  • caption; The caption of the category.

<item>

Description

Contains the path to the image file and description of this image. Here is used Server scripts to create thumbnails. BUT you can create thumbs using your own images, just add thumb attribute and set link to this file, which will be used as a thumbnail. If the server scripts are turned off and you didn't specify thumb attribute, so thumbnails will be created from the main (original) images.

Attributes

  • caption; The caption of the image. Using following set of special characters '&#xA;' (without single quotes) you can place thumb caption in several lines.
    Example: <item caption="Multiline&#xA;Caption" />
  • image; 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://.
  • thumb; The absolute or relative URL of the thumbnail file. A relative path must be relative to the HTML file. Absolute URLs must include the protocol reference, such as http://.
  • video; The absolute or relative URL of the video file. A relative path must be relative to the SWF file. Absolute URLs must include the protocol reference, such as http://.
  • tip; The tip of the image. It is shown when mouse over thumbnails.
  • description; The description of the image. You can use HTML tags in the description, but symbols <and > should be written as &lt; and &gt; . If you are using UI to edit the description, so these symbols will be replaced automaticaly after saving of the XML document.
    Example, anchor tag: <item description="&lt;a href='empty.jyml' target='_blank'&gt;HYPERLINK&lt;/a&gt;" />
  • link; The URL from which to obtain the document. If this attribute is set, the caption of the image will be represented as hyperlink.
  • 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.