1. Download WWD IMGviewer files
2. Add your images by putting them in the 'images' folder. Images should be JPGs and saved as non-progressive
3. Create thumbnail images using the image editing software of your choice.
- Thumbnails must be 75 pixels wide by 75pixels high.
- Thumbnails shoud be JPGs and saved as non-progressive.
- Thumbnail images should have the same filename as their corresponding full-size image.
- Place thumbnail images in the 'thumbs' folder which is in the 'images' folder.
4. Edit the 'slides.xml' file using a text editor (Notepad, WordPad, TextEdit).
Add a <slideNode> tag for each image:
<slideNode src="44.jpg" txt="Summer Palace, Beijing" />
each slideNode has 2 variables:
- src (name of the image file)
- txt (optional caption)
5. Set color options by editing the file 'index.html'.
To change the color of the up and down arrows, enter a hex color value for the 'arrowColor' parameter in the UFO javascript line in the <head> (currently set to white):
flashvars:"arrowColor=0xFFFFFF&BDRcolor=0xFFFFFF&Captions=1&XMLfile=slides.xml"
The hex color value for the parameter 'BDRcolor' sets the color for the large image frame and the thumnai frames.
Notice the hex color number is preceded by '0x'. For example, to set arrow color to red and frame color to black:
flashvars:"arrowColor=0xFF0000&BDRcolor=0x000000&Captions=1&XMLfile=slides.xml"
6. Set Caption options by editing the file 'index.html'
To show image captions, set the value of the 'Captions' parameter equal to 1:
flashvars:"arrowColor=0xFF0000&BDRcolor=0x000000&Captions=1&XMLfile=slides.xml"
To hide image captions, set the value of the 'Captions' parameter equal to 0:
flashvars:"arrowColor=0xFF0000&BDRcolor=0x000000&Captions=0&XMLfile=slides.xml"
7. Set path to XML file by editing the file 'index.html' (optional):
If you have more than one image gallery you can create another xml file with a different name. For example, if your image gallery uses an xml file called 'vacation.xml', set the value of the 'XMLfile' variable in the UFO javascript in the <head> as follows:
flashvars:"arrowColor=0xFFFFFF&BDRcolor=0xFFFFFF&Captions=0&XMLfile=slides.xml"
8. Upload all your files to your web server
files to upload should include all of the following:
- the 'images' folder and all of it's contents (including the 'thumbs' folder
- slides.xml
- imgViewer.swf
- ufo.js
- index.html