Photo Gallery

From Web Developer Network Wiki
Jump to: navigation, search

Deziner Folio gallery

This gallery is from the Deziner Folio blog and distributed under the BSD License. Deziner Folio is a group of two brothers from Bangalore, India, who develop and report on a lot of really great image and web design tools and tips. The following object code can also be used for implementing other Flash based image galleries such as Slide Show Pro.

You will need to download the following files and put them within a folder in your site's heirarchy.

Then create a folder named "images" within the same folder you just downloaded the above files into, and then create folders "big" and "thumbs" within the "images" folder.

Now decide what size image container you want the gallery to be in and add the appropriate "div" element and "class" attribute into the page in which you want the gallery to appear.

Now place the following code into your div container:

<object type="application/x-shockwave-flash" data="gallery.swf" width="680" height="383">

<param name="allowFullScreen" value="true" />
<param name="movie" value="gallery.swf" />
<param name="quality" value="best" />
<param name="FlashVars" value="xmlFile=gallery.xml" />
<param name="wmode" value="transparent" />


Make sure your references to the gallery.swf and gallery.xml files are pointed to the right location relative to the page in which you've just pasted this code and change the width and height attributes to correctly reflect whatever image container you've chosen. This object code provides a valid insertion of the gallery into your page. Don't forget the transparent wmode parameter - without it the gallery positions itself above all over elements (i.e. the drop down header)

Adding Photos

Open up the gallery.xml file - here is where you'll set things such as the gallery title, length of time each picture is displayed before going to the next one, etc. most all of these have great notes to help you set the correct values so I'll only highlight a couple points of interest:

Big and Thumbnail Directories

These need to either be set as absolute URL's or relative to the gallery.swf location.


This is where you will include the albums and images within each album following this format:

<album title="Ablum Title Here" description="Some Pithy Description of the Album">

<image title="Image Title" date="21.04.07" thumbnail="img1.jpg" image="img1.jpg">Image Description Goes Here</image>


For the thumbnail and image, all you need to do is type in the name of the file - if you've correctly put in your thumbnail and image locations at the beginning of the gallery.xml file the .swf should be able to call up the image you want. The large image can be however large you want it to be, keep the thumbnail around 50-100 px wide and of lesser quality than the actual image. If you want to keep things a bit more organized in your image folders, you can create subfolders for each album - just make sure to include the additional path to the subfolder in each image location. ex. thumbnail="subfolder/img1.jpg"

It's a Wrap

Put everything onto your server and you're good to go. From now on everytime you want to add more albums/photos, go into the gallery.xml file and enter as many as you want following the same format.

Personal tools