Setting Up
Folder and file structure:
The distribution can be downloaded as a ZIP. After downloading, unpack the file into any folder.
| fpg / |
gallery.html |
|
| |
320x240(324x264).swf |
|
| |
360x480(364x504).swf |
|
| |
480x360(484x384).swf |
|
| |
600x400(604x424).swf |
|
| |
640x360(644x384).swf |
|
| |
gallery / |
setup.xml |
| |
|
swfobject.js |
| |
|
xxxx.jpg (Sample photos) |
| |
|
: |
| |
thumbnail / |
xxx.jpg (Sample photos) |
| |
|
: |
|
Requirements:
- An account on a web server
- An FTP program to upload the necessary files to your web server
- A web browser with Flash Player 8 or later
Step 1: Copy images
Copy images to 'gallery' folder. It is recommended that you resize high resolution images to fit in the scren size in order to keep their quality. The images should be JPG.
Step 2: Create thumbnails
Create thumbnails with an image editor or thumbnail generator. Thumbnails should be 50 x 50 pixels. Large thumbnails will be resized to fit in 50 x 50 pixels.
Then, copy them into 'thumbnail' folder. Their filenames need to be the same to the images'.
Step 3: Edit setup.xml
Open the file, setup.xml, and edit it, following the instruction below.
To add a category, insert this code under <?xml version="1.0" encoding="UTF-8"?>:
<category>
<title>xxxx</title>
</category> |
To add a image insert this code under <title>xxxx</title>:
| <pic><file>xxxx.jpg</file><text>xxxx</text></pic> |
Here is an example of a gallery that has 2 categories and 3 images:
<?xml version="1.0" encoding="UTF-8"?>
<category>
<title>Spring</title>
<pic><file>001.jpg</file><text>Flower Garden</text></pic>
</category>
<category>
<title>Summer</title>
<pic><file>002.jpg</file><text>Sunflowers</text></pic>
<pic><file>003.jpg</file><text>Seaside View</text></pic>
</category>
<setup>
<slideshow>off</slideshow>
<delay>4</delay> </setup>
|
Step 4:
To embed the photo gallery into your existing web page, copy the following code and paste it on your HTML page.
<script type="text/javascript" src="gallery/swfobject.js"></script>
<div id="flashcontent" align="center">You need to upgrade your Flash plugin to view this content. Click <a href="http://www.adobe.com/go/getflashplayer">here</a> to download the latest version.</div> <script type="text/javascript">
var so = new SWFObject("480x360(484x384).swf", "gallery", "484", "384", "8", "#000000");
so.write("flashcontent"); </script> |
Step 5:
Open your FTP program and open an FTP connection to your web server. Then upload all of the files to your web server.
Customizing
Preferences:
To change the preferences, edit the file 'setup.xml'. You can set up auto slideshow (on/off) and slideshow delay (seconds).
Here is the default preferences:
<setup>
<slideshow>off</slideshow>
<delay>4</delay>
</setup> |
Screen size:
To change the screen size, edit a part of the HTML code embedded into your web page.
<script type="text/javascript" src="gallery/swfobject.js"></script>
<div id="flashcontent" align="center">You need to upgrade your Flash plugin to view this content. Click <a href="http://www.adobe.com/go/getflashplayer">here</a> to download the latest version.</div>
<script type="text/javascript">
var so = new SWFObject("480x360(484x384).swf", "gallery", "484", "384", "8", "#000000");
so.write("flashcontent");
</script> |
You can chose one of the following values:
- "320x240(324x264).swf" "324" "264"
- "360x480(364x504).swf" "364" "504"
- "480x360(484x384).swf" "484" "384"
- "600x400(604x424).swf" "604" "424"
- "640x360(644x384).swf" "644" "384"
Background color:
To change the gallery background color, edit a part of the HTML code embedded into your web page.
<script type="text/javascript" src="gallery/swfobject.js"></script>
<div id="flashcontent" align="center">You need to upgrade your Flash plugin to view this content. Click <a href="http://www.adobe.com/go/getflashplayer">here</a> to download the latest version.</div>
<script type="text/javascript">
var so = new SWFObject("480x360(484x384).swf", "gallery", "484", "384", "8", "#000000");
so.write("flashcontent");
</script> |
|