Dreamweaver Extensions

Working with XML content

Open the gallery.xml file in Dreamweaver (File -> Open), to change the content of your RainbowGallery. Also, you can open the XML content file through FlashDevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Rainbow Image Gallery). 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>
   <img src="photos/photo01.jpg">
      <thumb highlight="0xD80303">
         <item color="0x42145F" font="Myriad Pro" font_size="14">TITLE</item>
         <item color="0x858585" margin_top="-5">Caption line 1</item>
         <item>Caption line 2</item>
      </thumb>
      <title bg_color="0xD80303">TITLE</title>
      <description>
         <item>Description</item>
         <item margin_top="10" font="Myriad Pro" font_size="14" link="empty.html" target="_self">LINK</item>
      </description>
   </img>
   <img src="photos/photo02.jpg">
      <thumb highlight="0x007DBE">
         <item color="0x42145F" font="Myriad Pro" font_size="14">TITLE</item>
         <item color="0x858585" margin_top="-5">Caption line 1</item>
         <item>Caption line 2</item>
      </thumb>
      <description>
         <item font_size="14" color="0xA0A0A0">Description line 1</item>
         <item>Description line 2</item>
      </description>
   </img>
   <img src="photos/photo03.jpg">
      <thumb highlight="0xEE9600">
         <item color="0x42145F" font="Myriad Pro" font_size="14">TITLE</item>
         <item color="0x858585" margin_top="-5">Caption line 1</item>
         <item>Caption line 2</item>
      </thumb>
      <title bg_color="0xEE9600">TITLE</title>
   </img>
   <img src="photos/photo04.jpg">
      <thumb highlight="0x909192">
         <item color="0x42145F" font="Myriad Pro" font_size="14">TITLE</item>
         <item color="0x858585" margin_top="-5">Caption line 1</item>
         <item>Caption line 2</item>
      </thumb>
   </img>
</gallery>

In this example you can see 4 images. You can compare that some of them have title and description others are not. Also you can specify an individual thumbnail highlight for each slide, for example <thumb highlight="0xEE9600">. You can write any number of paragraphs in the description.

<gallery>

Description
Main tag and contains the description of the component.

<img>

Description
Contains the path to the image.

Attributes

  • 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://.

<thumb>

Description
Contains the text that shows at the right of the thumbnails. Text consists of one or more paragraphs <item>. You can set individual style for each paragraph using additional attributes. On-default style is seted in tab 'Thumbnails' in Flashdevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Rainbow Image Gallery).

Exmaple: <thumb highlight="0xEE9600"><item color="0x42145F" font="Myriad Pro" font_size="14">TITLE</item></thumb>

Optional attributes
The following attribute are optional for tag <thumb>.

  • highligh, The highlight color of the background of the thumbnail.

The following attribute are optional for tag <item>.

  • font, The font of the text. Embedded fonts: "Eurostile LT Std Ext Two", "Myriad Pro", "Impact". Use the embedded fonts, this will improve their quality.
  • font_size, The size of the font.
  • color, The color of the text.
  • margin_top, The top margin of the paragraph, in pixels.
  • margin_bottom, The bottom margin of the paragraph, in pixels.
  • margin_left, The left margin of the paragraph, in pixels.
  • margin_right, The right margin of the paragraph, in pixels.

<title>

Description
Contains the text that shows at the bottom of the slide at the background. This tag is not an obligatory tag, because slide can be used without title.

Exmaple: <title bg_color="0xEE9600">TITLE</title>

Optional attributes
The following attribute are optional for tag <title>.

  • bg_color, The background color of the panel.

<description>

Description
Contains the text that shows at the bottom of the slide at the front. Text consists of paragraphs <item>. You can set individual style for each paragraph using additional attributes. On-default style is set in tab 'Description' in Flashdevelopment24 Wizard (Right click on Flash Object, then FlashDevlopment24 Wizard -> Rainbow Image Gallery). <description> tag is not an obligatory tag, because slide can be used without description.

Exmaple: <description><item color="0xA0A0A0" margin_top="5">Text</item></description>

If you specify for tag <item> additional attribute link, so the text will be displayed as hyperlink. For exmaple: <item link="empty.html" target="_blank">Hyperlink</item>

Optional attributes
The following attribute are optional for tag <description>.

  • bg_color, The background color of the panel.

The following attribute are optional for tag <item>.

  • font, The font of the text. Embedded fonts: "Eurostile LT Std Ext Two", "Myriad Pro", "Impact". Use the embedded fonts, this will improve their quality.
  • font_size, The size of the font.
  • color, The color of the text.
  • align, A string that indicates the alignment of the text.
  • margin_top, The top margin of the paragraph, in pixels.
  • margin_bottom, The bottom margin of the paragraph, in pixels.
  • margin_left, The left margin of the paragraph, in pixels.
  • margin_right, The right margin of the paragraph, in pixels.
  • highlight, The highlight color of the link item.
  • 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