Simple XML Gallery Download
Developed by FMedia
Implementation: You can see the following files on the source folder
The above gallery.fla is a source file. The below files are needed to upload on the server.
Embed gallery.swf file to html page & send the path of data.xml file. The below code is the swfObject embedding code used to embed the gallery.swf to html file. See the index.html file. <div id="flashcontent"> <script type="text/javascript"> var so = new SWFObject("gallery.swf", "mymovie", "100%", "100%", "8"); so.addParam("menu", "false"); so.addVariable("dataPath", "gallery_asset/data.xml"); so.write("flashcontent"); </script> </div>
You need to send the path of the data.xml file through flash using dataPath variable. dataPath ◄─ gallery_asset/data.xml
About data.xml file: You can see the data.xml file in gallery_asset folder. data.xml file is used to design the gallery and also to send the images data. Below code show the structure of the formatting node in data.xml file. <formatting galleryWidth="0" galleryHeight="0" galleryLargeImageResize=" none" galleryLargeImageBorderSize="0" galleryLargeImageBorderColor="ffffff" galleryImageRandomDisplay="no" galleryBgColorFixed="000000" galleryBgColorAuto="yes" galleryTransition="0" galleryAutoPlay="yes" galleryDelayTime="4" gallerySlideshowLoop="yes" thumbnail="yes" thumbnailWidth="50" thumbnailHeight="50" thumbnailScrollSpeed="86" thumbnailautoHide="yes" thumbnailAlign="bottom" thumbnailsSpacing="3" thumbnailBorderSize="2" thumbnailBorderColor="000000" thumbnailHighlightBorderSize="3" thumbnailHighlightBorderColor="FFFFFF" numberOfthumbnailsToDisplay="0" descriptionTextWidth="0" descriptionTextFontSize="0" descriptionTextLeftMargin="20" descriptionTextRightMargin="10" descriptionTextEmbedFont="no" descriptionTextBgColor="000000" descriptionTextBgTransparency="25" descriptionTextAutoHide="yes" buttonNextPrevious="yes" buttonPlaypause="no" buttonPlaypauseHorizontalMargin="5" buttonPlaypauseVerticalMargin="5" buttonsAutoHide="yes" />
No
1
2
3
4 5
6
Xml setting
Description
galleryWidth="0"
Whole gallery width. Default value is 0. 0 values take the flash stage width.
galleryHeight="0"
Whole gallery height. Default value is 0. 0 values take the flash stage height.
galleryLargeImageResize=" none"
3 types of resize the large image is available (fitToArea, fit, none ). 1. fitToArea (resize the large image to fit the main area) 2. fit (resize the large image to cover over main area) 3. none (display without resize)
galleryLargeImageBorderSize="0"
galleryLargeImageBorderColor="ffffff"
galleryImageRandomDisplay="no"
large image border size
large image border color Option to display the image in random order Option: yes, no
7
galleryBgColorFixed="000000"
Gallery Background color in hexadecimal.
8
galleryBgColorAuto="yes"
Enable or Disable the large image background color. Option: yes, no
galleryTransition="0"
Option to choose large image transition. Option: 0 = auto 1 = simple fade 2 = Background Resize 3 = Move transition 4 = Diagonal fade transition
9
5 = Radial fade transition
10
galleryAutoPlay="yes"
Disable or enable the slide show auto play. Option: yes, no
11
galleryDelayTime="4"
Slide show delay time in seconds
12
gallerySlideshowLoop="yes"
Option to enable or disable the slide show loop. Option: yes, no
13
thumbnail="yes"
Option to Show or hide the thumbnails. Option: yes, no
14
thumbnailWidth="50"
Thumbnail image width
15
thumbnailHeight="50"
Thumbnail image height
16
thumbnailScrollSpeed="86"
Control thumbnail scrolling speed. The value to be below 100.
17
thumbnailautoHide="yes"
This option is used to hide the thumbnails when user mouse over the large image Option: yes, no
18
thumbnailAlign="bottom"
Thumbnails alignment. Option: bottom, top
19
thumbnailsSpacing="3"
Space between each thumbnail
20
thumbnailBorderSize="2"
Thumbnail border size
21
thumbnailBorderColor="000000"
Thumbnail border color in hexadecimal.
22
thumbnailHighlightBorderSize="3"
Thumbnail highlight border size
23
thumbnailHighlightBorderColor="FFFFFF" Thumbnail highlight border color
24
numberOfThumbnailsToDisplay="0"
Number of thumbnail to be display. Default value is 0. 0 values take the maximum number of thumbnails display.
25
descriptionTextWidth="0"
Description text width
26
descriptionTextFontSize="0"
The Description text Size in pixels. Default value is 0. If you need different font size, than you must assign the value to 0.
27
descriptionTextLeftMargin="20"
Description text left margin in pixel value
28
descriptionTextRightMargin="10"
Description text right margin in pixel value
29
descriptionTextEmbedFont="no"
Embed font or non Embed font option for description text. Option: yes, no
30
descriptionTextBgColor="000000"
Description text background color
31
descriptionTextBgTransparency="25"
Description text background transparent
32
descriptionTextAutoHide="yes"
This option is used to show the description text when user mouse over the large image Option: yes, no
33
buttonNextPrevious="yes"
Option to Show or hide the Next button and previous button. Option: yes, no
34
buttonPlaypause="no"
Option to Show or hide the PlayPause button. Option: yes, no
35
buttonPlaypauseHorizontalMargin="5"
PlayPause button horizontal space
36
buttonPlaypauseVerticalMargin="5"
PlayPause button vertical space
37
buttonsAutoHide="yes"
Option to Enable or Disable the auto hide playpause button, Next button and previous button. Option: yes, no
Below code show the structure of the image node in data.xml file: You can add the thumbnail image, large image, title, description, link, target of link and Background color using image node. You can add unlimited number of the images using the image node, Just copy and past the below code after the end of </image> tag.
<image bgColor="444444" thumb="gallery_asset/thumb_images/thumb1.jpg" main="gallery_asset/main_images/main1.jpg" url="gallery_asset/main_images/main1.jpg" target="_blank" title="Simple XML Gallery"> <![CDATA[<b>Simple XML Gallery</b> is completely resizable gallery and it's well structured.]]> </image>
Background color of the image in hexadecimal value. If you delete the attribute or leave it as blank then the background color is automatically added. If you don’t need the background color for all images, You must set the galleryBgColorAuto="no"
1
bgColor
2
thumb
Path of the thumbnail image
3
main
Path of the large image
4
url
5
target
6
title
7
url of the large image link Target of the link (_blank, _self, _parent or _top) Title of the image
<![CDATA[Descripti Description for the image. You must place the on Text]]> description text inside the CDATA tag. The description allow html format.
How to reduce the file size: The normal file size is 50kb with embed font, If you don’t need the embed font option than delete the embed font (“Font” symbol) in flash library before that you must disable the embed font option in data.xml file (descriptionTextEmbedFont="no") than after the file size will reduce to 30kb. Support:
If you see any bug, contact me through my profile page with details.