Simpleviewer tutorial. Today I will tell you how to create photo album using simple viewer library. I located this source long time ago, and can confirm – that this is good library too. Hope that you will love this too.
One of necessary features of simpleviewer is that it able to load xml set of images which you can provide via PHP 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.
Step 1. HTML
As usual, we start with the HTML. This is 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="#">Simple viewer sample</a></h3>
<div>
<div id="flashcontent">
<embed type="application/x-shockwave-flash" src="app/simpleviewer.swf" id="viewer" name="viewer" bgcolor="#181818" quality="high" flashvars="preloaderColor=0xffffff&xmlDataPath=feed.php" height="700px" width="100%">
</div>
<script type="text/javascript">
var flashvars = {
preloaderColor: "0xffffff",
xmlDataPath: "feed.php"
};
var params = {
//wmode: "transparent"
};
var attributes = {};
swfobject.embedSWF("app/simpleviewer.swf", "viewer", "100%", "700px", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script>
</div>
</div>
As you can see – initialization is easy – all through swfobject, where you can set wished params – different colors, sizes, xml data path (for our PHP file) and few more properties. If you want, you can simple set ‘wmode’ to necessary value too (to provide transparency as example).
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:1000px;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. JS
Here are single JS file:
js/swfobject.js
This is just SWFObject class. Available as a download 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>
<filename>{fileurl}</filename>
<caption>{title}</caption>
</image>
XML;
$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', 'pic16.jpg' => 'Image 16', 'pic17.jpg' => 'Image 17', 'pic18.jpg' => 'Image 18');
foreach ($aUnits as $sFilename => $sTitle) {
$sCode .= strtr($sTemplate, array('{fileurl}' => $sFilename, '{title}' => $sTitle));
}
header ('Content-Type: application/xml; charset=UTF-8');
echo <<<EOF
<?xml version="1.0" ?>
<simpleviewerGallery maxImageHeight="1024" maxImageWidth="1024" textColor="0xFFFFFF" frameColor="0xffffff" frameWidth="20" stagePadding="40" thumbnailColumns="3" thumbnailRows="6" navPosition="left" title="my album" enableRightClickOpen="true" backgroundImagePath="" thumbPath="data_images/" imagePath="data_images/">
{$sCode}
</simpleviewerGallery>
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. Plus – you can have custom album title too (instead ‘my album’).
Step 5. SWF application
app/simpleviewer.swf
This is main flash application – Simpleviewer. Available as a download package.
Step 6. 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.
Conclusion
Today I told you how to build new type of flash gallery. Sure that you will happy to use it in your projects. Good luck!