Overview | Documentation | Comparison Chart

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
Select and copy images to 'gallery' folder. It is recommended that you resize high resolution images in advance in order to keep their quality (high resolution images will be automatically displayed resized to fit in the screen).

Step 2: Create thumbnails
Create thumbnails with an image editor or thumbnail generator. Thumbnails should be 50 x 50 pixels (large thumbnails will also be resized).

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 using the following instructions.

To add a category, insert this code below <?xml version="1.0" encoding="UTF-8"?>:

<category>
          <title>
xxxx</title>
</category>

To add a image insert this code below <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>
©2007-2008 WEB DESIGN 51 Terms of Use | Coutact Us