The gpFlashGallery is an open source (free) XML-based Flash Photo Gallery. From page color, to thumb container dimensions, to transition type, every aspect of the gpFlashGallery can be configured using an XML file. Image information (location, title) are also stored in an XML file.

gpFlashGallery Features

• Easily change background color
• Display images with varying dimensions
• Image preloader
• Animation effects can be applied to large image (transition in and out)
• Thumb container can be positioned on the bottom or top of the page
• Optional title can be displayed for each image
• Free

You will rarely find a flash photo gallery with all of these features that is free.

I always use swfObject to load my Flash applications. To load the gpFlashGallery using the default loading options:

swfobject.embedSWF("gpFlashGallery.swf", "myGallery", "950", "690", "9.0.0", "expressInstall.swf");

gpFlashGallery requires two XML files to load ("config.xml" and "gallery.xml"). When using the default loading options as displayed above, the XML files should be placed in the same directory as the gpFlashGallery.swf file

If you prefer to name the files differently or place them in a different directory, you must specify these options using Flashvars. You can also use Flashvars to set a base url for the image location.

var flashvars = {};
flashvars.config_url = "{my new location}/config.xml";
flashvars.images_xml_url = "{my new location}/gallery.xml";
flashvars.images_base_url = "/images/";
var params = {};
params.scale = "noScale";
swfobject.embedSWF("gpFlashGallery.swf", "myGallery", "950", "690", "9.0.0", "expressInstall.swf", flashvars, params);

Note: I have included a sample html file (and swfobject) with the download (link).

The configuration file contains information about each component of the gpFlashGallery.

<pLayout>
<pStyles cType="page" bgColor="0x202020" />
<pStyles cType="thumbCntnr" position="bottom" nW="580" nH="65" vMargin="10" corners="6,6,6,6" bgColor="0x202020,0x3F3F3F"  borderSize="2" borderColor="0xFFFFFF" />
<pStyles cType="nav" nW="16" nH="16" shape_type="arrow" bgColor="0x999999" bgColorHover="0x4E6698" borderSize="1" borderColor="0xFFFFFF" borderColorHover="0xFFFFFF" />
<pStyles cType="thumbs" borderSize="2" borderColorHover="0xFFFFFF" borderColorSelected="0xFF6600" vMargin="4" hMargin="4" />
<pStyles cType="large" borderSize="2" borderColor="0xFFFFFF" transTypeIn="Fade" transTypeOut="Photo,PixelDissolve" />
<pStyles cType="title" showTitle="true" position="top" vMargin="10" tProperties="autoSize:center" tFormat="font:Arial,bold:true,align:center,color:0xFFFFFF,size:12" />
</pLayout>

Page

Set the bgColor attribute to change the background color of the page

Thumb Container

position: The thumb container can be positioned on the top or bottom.

nW: The width of the thumb container.

nH: The height of the thumb container.

vMargin: The vertical margin. For instance, if the value is set to 10 and the thumb container is positioned on the bottom, it will be placed 10 units from the bottom of the flash movie.

corners: Curved corners. The values are the amount of curve for each corner. If you do not want the thumb container to have curves, leave this attribute empty (an empty string or remove the attribute entirely). You can also specify which corners are curved. For instance, a value of "0,7,7,7" will create curved corners for the top right, bottom right and bottom left, but the top left of the thumb container will not be curved.

bgColor: The background color. You set the value to a single color, or, as in the example above, set multiple colors to create a gradient effect

borderSize: The size of the border around the thumb container.

borderColor: The color of the border.

Navigation

nW: The width of the navigation buttons.

nH: The height of the navigation buttons.

shape_type: The shape type can be either "arrow" or "triangle".

bgColor: The background color. Again, this can be a single color or multiple colors.

bgColorHover: The background color when the mouse is over the button.

borderSize: The size of the border around the navigation button.

borderColor: The color of the border.

borderColorHover: The border color when the mouse is over the button.

Note: You can alternatively, color the Thumb Container and Navigation using preset web 2.0 color schemes. Remove the bgColor, borderSize, and borderColor attributes and replace them with a preset color scheme name.

The gallery.xml file holds the location of the thumb and large image as well as the title.

<photoGallery>
<images thumb="images/thumbs/fashionartwork.jpg" large="images/large/fashionartwork.jpg" title="Fashion Art Work" />
<images thumb="images/thumbs/watch.jpg" large="images/large/watch.jpg" title="Watch" />
<images thumb="images/thumbs/birds.jpg" large="images/large/birds.jpg" title="Birds" />
<images thumb="images/thumbs/sunset.jpg" large="images/large/sunset.jpg" title="Sunset" />
<images thumb="images/thumbs/duck.jpg" large="images/large/duck.jpg" title="Duck" />
</photogallery>

If a title don't want to display a title for each image, then the title attribute can be removed.

The demo displays the photo gallery with the default options.
Images used in the demo were downloaded from FreePhotosBank.com

Demo

The gpFlashGallery can be downloaded from GitHub.