How to Easily Create a Flash Photo Gallery

Creating flash photo gallery

Today I will tell you how to create very nice photo album using one small flash gallery. This have very easy way to see photos, just check its demo. Hope that you will like this too.

One of important features of this gallery is that it can accept custom set of images via php-generated XML file. So just imagine, that in your script (or maybe some CMS), you will able to generate different galleries based on different params. As example photo galleries of members of your website.

Here are samples and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we will start with the HTML. This is source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />

<div class="example">
    <h3><a href="#">Flash gallery viewer sample</a></h3>

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="100%" height="100%" align="middle" quality="high" scale="noscale">
        <param name="MENU" value="FALSE" />
        <param name="wmode" value="transparent" />
        <param name="SRC" value="app/gallery.swf" />
        <param name="flashvars" value="xmlDataPath=feed.php" />
        <embed src="app/gallery.swf" flashvars="xmlDataPath=feed.php" wmode="transparent" menu="false" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" width="100%" height="100%" align="middle" quality="high" scale="noscale"></embed>
    </object>
</div>

Initialization is very easy – through pure flash embed code, where you can set necessary params – xml data path and wmode mode.

Step 2. CSS

Here are used CSS file for our demo:

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:900px;height:800px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px}

Step 3. PHP

Here are code of our XML generator (to generate xml-based set of using images):

feed.php

<?

$sCode = '';

$sTemplate = <<<XML
<img src="{fileurl}" width="{width}" height="{height}" />
XML;

$aUnits = array('pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg', 'pic6.jpg', 'pic7.jpg', 'pic8.jpg');
foreach ($aUnits as $sFilename) {
    list($width, $height, $type, $attr) = getimagesize('data_images/'.$sFilename);
    $sCode .= strtr($sTemplate, array('{fileurl}' => 'data_images/'.$sFilename, '{width}' => $width, '{height}' => $height));
}

header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" ?>
{$sCode}
EOF;

?>

As you can see – I just generate easy XML feed using special template. You can do this with your images and using different paths to images too.

Step 4. SWF application

app/gallery.swf

This is main flash application. Available as a download package.

Step 5. Images

All custom images located inside ‘data_images’ folder. This can be any other your folder of course. Just don`t forget to correct feed.php in this case too.

Live Demo

download in package

Conclusion

Today I told you how to build nice flash gallery. Sure that you will happy to use it in your projects. Good luck!

Related Articles

How to create flash gallery using Autoviewer

TiltViewer tutorial – creating 3D flash gallery

Creating A Globe Shaped Photo Gallery using 3D Sphere Gallery FX

How to Create a Pure CSS3 Animated Photo Gallery