Simpleviewer – How to creat a flash photo album

Simpleviewer – How to creat a flash photo album

2 361
Simpleviewer – creating flash photo album

Simpleviewer – creating flash photo album

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.

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 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&amp;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.


Live Demo
download in package

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!


2 COMMENTS

  1. Thanks for this great tutorial! Keep up the good work..

    But I still can’t get it to work on my website. Getting the following error;

    “Cannot parse gallery XML” live preview at http://harderstylezradio.com/gallery

    And as you can see my slideshow isn’t working well together with photo album
    aswell. Maybe you got an answer for that aswell..

    I hope you can help me out here, thanks in advanced.

    Marco

Leave a Reply