TiltViewer tutorial – creating 3D flash gallery

TiltViewer 3D flash gallery tutorial. Today we will continue overviews of available flash galleries. Next gallery will TiltViewer. This is free gallery too. This gallery allow us to easy interact with images with mouse and keyboard, it have nice 3D interface, each image can be flipped and zoomed. One of the nice features is the native compatibility with flickr, so you can easy to display your flickr photos, more, this gallery have light weight (just 100kb) and of course, this is cross platform gallery. Sure that your visitors will like this.

As for us – one of the most important features of TiltViewer – what it can to download the necessary array of data (in XML) through the use PHP file. Just imagine that your script (eg CMS) will generate a variety of photo galleries of your users. Sounds good, isn’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 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="#">TiltViewer example</a></h3>
    <div>
        <div id="fc">TiltViewer 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/TiltViewer.swf', 'viewer', '100%', '600px', '9.0.28', '#000000');
            fo.addVariable('useFlickr', 'false'); // we don`t need flickr right now
            fo.addVariable('xmlURL', 'feed.php'); // generator of fallery xml file
            fo.addVariable('maxJPGSize','800'); // max file dimension size used for gallery
            fo.addVariable('useReloadButton', 'false'); // we don`t need it for our demo
            fo.addVariable('columns', '3'); // we will use 3 columns
            fo.addVariable('rows', '3'); // and 3 rows (other images will at second page)
            fo.addParam('allowFullScreen','true');
            fo.write("fc");
        </script>
    </div>
</div>

As you can see – initialization is very easy – all through swfobject, where we can set all necessary params for our sample: we will disable flickr functional for now, point xml data path (PHP file), max size of used photos, amount of columns and rows.

Here are all another possible extra params which we can use (all params will need to set through our ‘fo’ object):

    //base options
    fo.addVariable("useReloadButton", "false"); // use Reload button?
    fo.addVariable("columns", "3"); // amount of columns
    fo.addVariable("rows", "3"); // amount of rows
    fo.addVariable("showFlipButton", "true"); // show Flip button?
    // ... hope no need to re-translate all other options,
    // ... its very easy to understand what it mean by name
    fo.addVariable("showLinkButton", "true");
    fo.addVariable("linkLabel", "View image info");
    fo.addVariable("frameColor", "0xFF0000");
    fo.addVariable("backColor", "0xDDDDDD");
    fo.addVariable("bkgndInnerColor", "0xFF00FF");
    fo.addVariable("bkgndOuterColor", "0x0000FF");
    fo.addVariable("langGoFull", "Go Fullscreen");
    fo.addVariable("langExitFull", "Exit Fullscreen");
    fo.addVariable("langAbout", "About");
    // XML option
    fo.addVariable("xmlURL", "feed.php"); // generator of fallery xml file
    fo.addVariable("maxJPGSize","800"); // max file dimension size used for gallery
    //Flickr options
    fo.addVariable("useFlickr", "true"); // using flickr feature
    fo.addVariable("user_id", "48508968@N00"); // flickr user id
    fo.addVariable("tags", "jump,smile"); // display images with these tags
    fo.addVariable("tag_mode", "all");
    fo.addVariable("showTakenByText", "true");

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;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
<photo imageurl="{fileurl}" >
    <title>{title}</title>
    <description>{title}<br />({width} x {height}).</description>
</photo>
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"?>
<tiltviewergallery>
    <photos>
        {$sCode}
    </photos>
</tiltviewergallery>
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. Description field can allow simple HTML too. Here are example: <![CDATA[Description with some html. Supported tags: <b>bold</b>, <u>underline</u>, <i>italics</i>, line breaks<br> and <font color="#0000FF" size="80">font tags</font>.]]>

Step 5. SWF application

app/TiltViewer.swf

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

Step 6. Images

All our images located in ‘data_images’ folder. Of course, you can use another directory. 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!