How to Easily Create a Flash Photo Gallery

How to Easily Create a Flash Photo Gallery

6 60585

Flash Photo Gallery tutorial. 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

[sociallocker]

download in package

[/sociallocker]


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

Conclusion

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

SIMILAR ARTICLES


6 COMMENTS

  1. Very interresting gallery-but i have a question- why this gallery don’t want to work local?
    After dowloading package – i’ve opened it and load index.html-but didn’t saw the gallery!?

    • Hello Helen,

      Make sure that you open it under localhost and not with absolute path. All just because we have one PHP file here.

  2. Very interresting gallery-but i have a question- why this gallery don’t want to work local?
    After dowloading package – i’ve opened it and load index.html-but didn’t saw the gallery!?

    • Hi Jackson,
      Pay attention, that depending on your hosting and isp – there can be some delay before you see the images

Leave a Reply to admin Cancel reply