How to create flash gallery using Autoviewer

Today we will continue overviews of available flash galleries. Next gallery is Autoviewer. This is free plugin. We can use mouse and keyboard to navigate between images, also this plugin have play/pause button, autoplay functionality, light weight and of course – cross platform. Hope that you will like this.

One of necessary features of autoviewer is that it able to load xml set of images which you can generate using PHP. So just imagine, that in your script (or maybe some CMS), you will able to generate different galleries based on different params. As example member`s photo galleries of your website.

Here are samples and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
css/main.css
Step 3. JS
js/swfobject.js
Step 4. PHP
feed.php
Step 5. SWF application
app/autoviewer.swf
Step 6. Images
Conclusion

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 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="#">Autoviewer example</a></h3> 
  
    <div> 
  
        <div id="flashcontent"> 
  
            <embed type="application/x-shockwave-flash" src="app/autoviewer.swf" id="viewer" name="viewer" bgcolor="#181818" quality="high" flashvars="xmlURL=feed.php" height="700px" width="100%"> 
  
        </div> 
  
        <script type="text/javascript"> 
  
            var flashvars = { 
  
              xmlURL: "feed.php" 
  
            }; 
  
            var params = { 
  
              //wmode: "transparent" 
  
            }; 
  
            var attributes = {}; 
  
            swfobject.embedSWF("app/autoviewer.swf", "viewer", "100%", "700px", "9.0.0","expressInstall.swf", flashvars, params, attributes); 
  
        </script> 
  
    </div> 
  
</div>

As you can see – initialization is very 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> 
  
   <url>{fileurl}</url> 
  
   <caption>{title}</caption> 
  
   <width>{width}</width> 
  
   <height>{height}</height> 
  
</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', 'pic16.jpg' => 'Image 16', 'pic17.jpg' => 'Image 17', 'pic18.jpg' => 'Image 18'); 
  
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 frameColor="0xFFFFFF" frameWidth="15" imagePadding="20" displayTime="5" enableRightClickOpen="true"> 
  
{$sCode} 
  
</gallery> 
  
EOF; 
  
?>

Here I just generate pretty easy XML feed using custom template. You can do this with your images and using different paths to images too. Caption field can allow simple HTML too. So you can left links here or use different fonts for titles.

Step 5. SWF application

app/autoviewer.swf

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

Step 6. Images

All our images located in ‘data_images’ folder. Of course, you can use another folder path and name. Just don`t forget to correct feed.php in this case too.

Live Demo

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!