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!
Can we use this for commercial use?
I really need something like this for my site. Thanks!
Yes, sure, but suggest you to contact with owners of this plugin firstly too
It is a simply awesome.
Thanks,
D M Jeelan