This page is describing all aspects of FlexiGallery installing and configuring on your website
Gallery Creating and Publishing
Unzip FlexiGallery files using WinZip or WinRAR.
Copy images you want to show in your gallery to a new folder in the FlexiGallery folder.
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.
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/">
All images are described with the <item> XML tag. You may place as many items as you want between
<gallery> and </gallery> tags.
<description>Description for this photo<description>
name of large image file placed in the imagesFolder.
name of thumbnail image file placed in the thumbnailsFolder.
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.
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>
Configure FlexiGallery interface and upload it to your server.
Enjoy with your great photos published in web.
FlexiGallery: Configuring Interface
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
These settings are placed inside the <general>....</general> tag
Background color of the gallery in HEX format
Top padding of the gallery
Bottom padding of the gallery
Right padding of the gallery
Left padding of the gallery
Large Image Settings:
Large image settings are placed inside <largeImage>....</largeImage> tag
Border color of the larger image in HEX format (i.e.: FFFFFF)
You may define borderColor the same with backGroundColor in order to make border invisible
Thumbnails settings are placed inside <thumbnails>....</ thumbnails> tag
Border color of thumbnails in HEX format (i.e.: FFFFFF)
Border color of selected thumbnail in HEX format (i.e.: FFFFFF)
Thumbnails height. All loaded images are resized to this value.
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>
Then you need to add a small amount of code into your page <body>:
1) Create a container for FlexiGallery
This text is replaced by FlexiGallery.
2) Create FexiGallery flash movie and add it to the <div> container
var so = new SWFObject (swf, id, width, height, version, background-color);
so.addVariable ("galleryXML", "pathToGalleryXML");
- The file path and name to gallery.swf file on your web site
- The ID of your object or embed tag
- The width of your gallery
- The height of your gallery.
- The required player version for your Flash content. Have to be "8"
- This is the hex value of the background color of your Flash movie.
path to the FlexiGallery folder on your website. This parameter is mandatory.
path to the settings.xml on your website.
By default it uses path: BASE + "data/settings.xml"
path to the gallery.xml on your website.
By default it uses path: BASE + "data/ gallery.xml"
var so=new SWFObject( "http://mysite.com/FlexiGallery/gallery.swf", "gallery", "500", "400", "8", "FFFFFF" )
so.addParam("BASE", " http://mysite.com/FlexiGallery/");
so.addVariable ("galleryXML", "data/gallery.xml");
so.write( "flexiGalleryContainer" ) is adding FlexiGallery to the div with id = "flexiGalleryContainer"