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 to 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.
More information:
FlexiGallery: Configuring Interface
FlexiGallery: Embedding into HTML Page
