FlexiGallery - XML Flash Image Gallery



FlexiGallery: How to Install Guide


This page is describing all aspects of FlexiGallery installing and configuring on your website


Gallery Creating and Publishing


Step 1:
Unzip FlexiGallery files using WinZip or WinRAR.

Step 2:
Copy images you want to show in your gallery to a new folder in the FlexiGallery folder.

Step 3:
Create thumbnail images for your images, using any image editing software (Adobe Photoshop, Adobe Image Ready or even MS Paint). Thumbnails should to be the same height otherwise they will be resized in the gallery. Then copy received image files into another folder.

Step 4:
Edit data/gallery.xml: Open this file in any text editor (Notepad, TextMate or any other) . You will see XML that describing images using by FlexiGallery In the <gallery> tag you may configure paths to the folders with your images and thumbnails

<gallery thumbnailsFolder="myThumbs/” imagesFolder="myImages/”>

You may use either absolute or relative (for the FlexiGallery folder) paths. We advise you to use absolute paths, if you unsure about relative paths setup.

Relative path example:
<gallery thumbnailsFolder="myThumbs/” imagesFolder=" myImages/”>

Absolute path example:
<gallery thumbnailsFolder = "http://mysite.com/FlexiGallery/myThumbs/" imagesFolder = "http://mysite.com/FlexiGallery/myImages/">

Step 5:
All images are described with the <item> XML tag. You may place as many items as you want between
<gallery> and </gallery> tags.

<item>
<image>photo_1.jpg</image>
      <thumbnail>photo_1_thmb.jpg</thumbnail>
      <url>images/full/ photo_1.jpg</url>
      <description>Description for this photo<description>
</item>

image: name of large image file placed in the imagesFolder.

thumbnail: name of thumbnail image file placed in the thumbnailsFolder.

url [optional]: link that will be opened when user click on a large image in a gallery. Leave the tag empty to don’t open any url.

description [optional]: Caption text that will be shown when user see an image. Leave it empty to don’t show a caption.

If you want to use some HTML tags for text formatting - you have to place it inside special CDATA tag:
<description><![CDATA[You may add any <FONT color="FF0000">description to an image either as plain text, or using <b>HTML tags</b>]]></description>

Step 6:
Configure FlexiGallery interface and upload it to your server.
Enjoy with your great photos published in web.



FlexiGallery: Configuring Interface


Edit data/settings.xml: Open this file in any text editor (Notepad, TextMate or any other). You will see XML structure that defines key interface settings for the gallery

General Settings:
These settings are placed inside the <general>....</general> tag

backGroundColor: Background color of the gallery in HEX format

paddingTop: Top padding of the gallery

paddingBottom: Bottom padding of the gallery

paddingRight: Right padding of the gallery

paddingLeft: Left padding of the gallery

Large Image Settings:
Large image settings are placed inside <largeImage>....</largeImage> tag

borderColor: Border color of the larger image in HEX format (i.e.: FFFFFF)

Tip:
You may define borderColor the same with backGroundColor in order to make border invisible

Thumbnails settings are placed inside <thumbnails>....</ thumbnails> tag

borderColor: Border color of thumbnails in HEX format (i.e.: FFFFFF)

borderColorOnRollOver: Border color of selected thumbnail in HEX format (i.e.: FFFFFF)

height: Thumbnails height. All loaded images are resized to this value.

align: Thumbnails panel position. Acceptable values are top and bottom.



FlexiGallery: Embedding into HTML Page


For handy embedding of the FlexiGallery into HTML page we use SWFObject script
You may find required swfobject.js in the folder "FlexiGallery/js" of the distributive
In order to use it you have to include swfobject.js into your page <head>

Example:
<head>
     <script type="text/javascript" src="http://mysite.com/FlexiGallery/js/swfobject.js"></script>
.........

Then you need to add a small amount of code into your page <body>:

1) Create a container for FlexiGallery

<div id="flexiGalleryContainer">
     This text is replaced by FlexiGallery.
</div>

2) Create FexiGallery flash movie and add it to the <div> container

<script type="text/javascript">
     var so = new SWFObject (swf, id, width, height, version, background-color);
     so.addParam("BASE", "pathToFlexiGalleryFolder");
     so.addVariable("settingsXML", "pathToSettingsXML");
     so.addVariable ("galleryXML", "pathToGalleryXML");
     so.write("flexiGalleryContainer");
</script>

swf - The file path and name to gallery.swf file on your web site

id - The ID of your object or embed tag

width - The width of your gallery

height - The height of your gallery.

version - The required player version for your Flash content. Have to be "8"

background-color - This is the hex value of the background color of your Flash movie.

BASE: path to the FlexiGallery folder on your website. This parameter is mandatory.

settingsXML [optional]: path to the settings.xml on your website.

By default it uses path: BASE + "data/settings.xml"

galleryXML [optional]: path to the gallery.xml on your website.

By default it uses path: BASE + "data/ gallery.xml"

Example:
</script>
var so=new SWFObject( "http://mysite.com/FlexiGallery/gallery.swf", "gallery", "500", "400", "8", "FFFFFF" )
     so.addParam("BASE", " http://mysite.com/FlexiGallery/");
     so.addVariable("settingsXML", "data/settings.xml");
     so.addVariable ("galleryXML", "data/gallery.xml");
     so.write("flexiGalleryContainer");
</script>

Hint:
so.write( "flexiGalleryContainer" ) is adding FlexiGallery to the div with id = "flexiGalleryContainer"


FlexiGallery: Product Page

FlexiGallery: Download Page