Creating photo gallery using PostcardViewer

Jun 22, 2011

0 26375

Creating photo gallery using PostcardViewer

Today we will continue overviews of available flash galleries. Next gallery will PostcardViewer. This gallery display images like set of postcards shuffled at surface. We can easy interact with images with mouse and keyboard (mouse to zoom in and out, arrow keys to navigate, space to zoom too). Gallery have very light weight (less than 20kb). Also we have possibility to have customized image captions too.

One of the most important features of PostcardViewer – possibility to obtain necessary gallery info through attached PHP file. It will allow us to generate dofferent sets of images (in case if this is galleries of different members as example). This can be useful, usn`t it?

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 start with the HTML. This is whole source code of our sample:

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/swfobject.js"></script>
<div class="example">
    <h3><a href="#">PostcardViewer example</a></h3>
    <div>
        <div id="fc">PostcardViewer requires JavaScript and the latest Flash player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a></div>
        <script type="text/javascript">
            var fo = new SWFObject('app/viewer.swf', 'viewer', '100%', '600px', '8', '#FFFFFF');
            fo.addVariable('langOpenImage', 'Open Image in New Window');
            fo.addVariable('langAbout', 'About');
            fo.addVariable('xmlURL', 'feed.php');
            fo.write('fc');
        </script>
    </div>
</div>

Initialization is very easy – all through swfobject, where we can set all necessary params: langOpenImage, langAbout (its possible to override few captions on popup menu), xmlURL – file, which will generate us gallery images info in necessary format.

Here are necessary JS initialization again (without html code):

    var fo = new SWFObject('app/viewer.swf', 'viewer', '100%', '600px', '8', '#FFFFFF'); //creating new SWF object
    fo.addVariable('langOpenImage', 'Open Image in New Window'); // overriding default text, optional
    fo.addVariable('langAbout', 'About'); // overriding default text, optional
    fo.addVariable('xmlURL', 'feed.php'); // set custom file as gallery info data, optional

Step 2. CSS

Here are used CSS file for our demo (for layout only):

css/main.css

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

Step 3. JS

Here are single JS file:

js/swfobject.js

This is just SWFObject class. Available in our package.

Step 4. PHP

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

feed.php

<?
$sCode = '';
$sTemplate = <<<XML
<image>
   <url>{fileurl}</url>
   <caption><![CDATA[<u>{title}</u>  ({width} x {height}).]]></caption>
</image>
XML;
$sFolder = 'data_images/';
$aUnits = array(
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10', 'pic11.jpg' => 'Image 11', 'pic12.jpg' => 'Image 12',
    'pic13.jpg' => 'Image 13', 'pic14.jpg' => 'Image 14', 'pic15.jpg' => 'Image 15'
);
foreach ($aUnits as $sFileName => $sTitle) {
    $sFilePath = $sFolder . $sFileName;
    list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFilePath);
    $sCode .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight));
}
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" encoding="UTF-8" ?>
<gallery cellDimension="850" columns="5" zoomOutPerc="15" zoomInPerc="100" frameWidth="10" frameColor="0xAAAAAA" captionColor="0xFFFFFF" enableRightClickOpen="true">
    {$sCode}
</gallery>
EOF;
?>

Let’s look at the code in details. Firstly I define template for our image units:

$sTemplate = <<<XML
<image>
   <url>{fileurl}</url>
   <caption><![CDATA[<u>{title}</u>  ({width} x {height}).]]></caption>
</image>
XML;

As I read in official documentation – in caption we can use next tags: U (underline), A (hyperlinks), BR (linebreaks) and FONT (font tags).

Then, I hardcoded array of used images:

$aUnits = array(
    'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4',
    'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8',
    'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10', 'pic11.jpg' => 'Image 11', 'pic12.jpg' => 'Image 12',
    'pic13.jpg' => 'Image 13', 'pic14.jpg' => 'Image 14', 'pic15.jpg' => 'Image 15'
);

Of course, you don`t need it in case of you making gallery with different sets of images. In that case I can suggest you to use SQL or another ways to obtain info about images. After it – I passing through all our images and filling info about photos within our predefined template:

foreach ($aUnits as $sFileName => $sTitle) {
    $sFilePath = $sFolder . $sFileName;
    list ($iWidth, $iHeight, $vType, $vAttr) = getimagesize($sFilePath);
    $sCode .= strtr($sTemplate, array('{fileurl}' => $sFilePath, '{title}' => $sTitle, '{width}' => $iWidth, '{height}' => $iHeight));
}

As you can see – I collecting all this into string variable $sCode. In result – we will just echo our result XML:

header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" encoding="UTF-8" ?>
<gallery cellDimension="850" columns="5" zoomOutPerc="15" zoomInPerc="100" frameWidth="10" frameColor="0xAAAAAA" captionColor="0xFFFFFF" enableRightClickOpen="true">
    {$sCode}
</gallery>
EOF;

Done, our generator ready!

Step 5. SWF application

app/viewer.swf

Its gallery swf file itself. Available in package.

Step 6. Images

All our images located in ‘data_images’ folder. Of course, you can use another directory. Don`t forget to correct feed.php if you going to use another folder for images.