Inner-Page version
Component settings and data are got from XML file, e.g. data.xml:
<?xml version="1.0" encoding="utf-8"?>
<boxRotator>
<settings>
<view>
<size width="130" height="400" />
<perspective coeff="300" />
<rotate direction="horizontal" time="1" transition="easeOutQuad" />
<rotateDepth enable="false" distance="10" />
</view>
<slideShow enable="true" defaultTimeout="2" order="ascending" />
</settings>
<items>
<item type="static" src="images/auto1.jpg" />
<item type="static" src="images/auto2.jpg" />
<item type="static" src="images/auto3.jpg" timeout="4" />
<item type="static" src="images/auto4.jpg" />
<item type="static" src="images/auto5.jpg" />
</items>
</boxRotator>
You can use static (png, jpg, gif) or interactive (swf) types for each item.
Paste this HTML code to a <head> tag:
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("box-rotator-inpage.swf", "flashcontent", "200", "500", "9", null, {datafile:"data.xml"});
</script>
Paste this code to place where you want to see the component:
<div id="flashcontent"></div>
Experiment with settings in XML file.
Until load finish classical circle preloader will be show.
Note: Make sure that you set correct pixel sizes in XML file and URLs for following: swfobject.js, data.xml, and files in XML. Use the swfobject.js file from component's archive.