This is a simple, yet dynamic banner rotator. It can easily be used as a portfolio viewer, as seen below in Sample #2.
There are quite a few options built into the application, all editable through XML. Take a look at the sample XML code below for the general setup, as well as the sample XML code for different ways to set up each project.
This sample is setup as a basic banner rotator with a timer that loops through the projects. You set the timer length in the xml for images & swfs, but when a video loads the application will play the full video before moving onto the next project.
This sample is setup as a portfolio gallery. All of the same functionality exists no matter what size you make the application.
<!-- Use 'true' to enable the timer. Use 'true' to start the timer automatically. Set the timer length in seconds. -->
<TIMER enabled="true" auto_start="true" length="3"/>
<!-- Use 'true' or 'false' -->
<AUTO_HIDE_THUMBS>true</AUTO_HIDE_THUMBS>
<!-- Set the vertical position of the thumbs. -->
<THUMB_Y_OFFSET>-75</THUMB_Y_OFFSET>
<!-- Set the images you want to use for the previous and next buttons. Dimensions: 50 x 50 pixels -->
<PREV_IMAGE>_thumbs/previous_btn.jpg</PREV_IMAGE>
<NEXT_IMAGE>_thumbs/next_btn.jpg</NEXT_IMAGE>
<!-- Use 'true' or 'false' wether you want the info to show automatically -->
<AUTO_SHOW_INFO>false</AUTO_SHOW_INFO>
<!-- Hexadecical background color of the info block -->
<INFO_BACKGROUND_COLOR>000000</INFO_BACKGROUND_COLOR>
<!-- The opacity of info block background -->
<INFO_BACKGROUND_OPACITY>.5</INFO_BACKGROUND_OPACITY>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the info block. -->
<INFO_DIRECTION>down</INFO_DIRECTION>
<!-- The width of the info block. *This is only used when sliding the info in from the left or right. -->
<SIDE_INFO_WIDTH>200</SIDE_INFO_WIDTH>
<!-- Hexadecical background color of the preloader -->
<PRELOADER_BACKGROUND_COLOR>000000</PRELOADER_BACKGROUND_COLOR>
<!-- The opacity of preloader background -->
<PRELOADER_BACKGROUND_OPACITY>.5</PRELOADER_BACKGROUND_OPACITY>
<!-- Hexadecical background color of the preloader -->
<PRELOADER_TEXT_COLOR>FFFFFF</PRELOADER_TEXT_COLOR>
<!-- The opacity of preloader text -->
<PRELOADER_TEXT_OPACITY>.75</PRELOADER_TEXT_OPACITY>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the preloader. -->
<PRELOADER_DIRECTION>right</PRELOADER_DIRECTION>
<!-- Use 'no_scale', 'fit', or 'fill_stage'. The scaling method of the projects. -->
<PROJECT_SCALING>no_scale</PROJECT_SCALING>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the project. -->
<PROJECT_DIRECTION>up</PROJECT_DIRECTION>
<!-- The horizontal offset of the project. Used mainly for external swfs -->
<OFFSET_HORIZONTAL>0</OFFSET_HORIZONTAL>
<!-- The vertical offset of the project. Used mainly for external swfs -->
<OFFSET_VERTICAL>0</OFFSET_VERTICAL>
<!-- **This is a banner** -->
<BANNER>
<path>_images/img_1.jpg</path>
<thumb>_thumbs/img_1.jpg</thumb>
</BANNER>
<!-- **This is a banner** -->
<BANNER>
<path>_swfs/sample.swf</path>
<thumb>_thumbs/swf.jpg</thumb>
<info><![CDATA[
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <p>In congue viverra interdum.
Nulla pellentesque odio quis ante dictum at hendrerit magna tempus.</p> <a href="http://google.com"
targat="_blank">Nam nisl nulla, molestie</a><p> eu iaculis eu, accumsan sit amet diam.
Ut eget erat ante, ac lacinia lorem. Maecenas tempus sapien nec sem pharetra congue</p>.
]]></info>
<OFFSET_HORIZONTAL>140</OFFSET_HORIZONTAL>
<OFFSET_VERTICAL>127</OFFSET_VERTICAL>
<AUTO_SHOW_INFO>true</AUTO_SHOW_INFO>
</BANNER>
<!-- **This is a banner** -->
<BANNER>
<path>_videos/vid.mp4</path>
<thumb>_thumbs/vid.jpg</thumb>
<info><![CDATA[
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1> <p>In congue viverra interdum.
Nulla pellentesque odio quis ante dictum at hendrerit magna tempus.</p> <a href="http://google.com"
targat="_blank">Nam nisl nulla, molestie</a><p> eu iaculis eu, accumsan sit amet diam.
Ut eget erat ante, ac lacinia lorem. Maecenas tempus sapien nec sem pharetra congue</p>.
]]></info>
<!-- Use 'true' or 'false' wether you want the info to show automatically -->
<AUTO_SHOW_INFO>true</AUTO_SHOW_INFO>
<!-- Hexadecical background color of the info block -->
<INFO_BACKGROUND_COLOR>ff0000</INFO_BACKGROUND_COLOR>
<!-- The opacity of info block background -->
<INFO_BACKGROUND_OPACITY>.75</INFO_BACKGROUND_OPACITY>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the info block. -->
<INFO_DIRECTION>right</INFO_DIRECTION>
<!-- The width of the info block. *This is only used when sliding the info in from the left or right. -->
<SIDE_INFO_WIDTH>200</SIDE_INFO_WIDTH>
<!-- Hexadecical background color of the preloader -->
<PRELOADER_BACKGROUND_COLOR>ff0000</PRELOADER_BACKGROUND_COLOR>
<!-- The opacity of preloader background -->
<PRELOADER_BACKGROUND_OPACITY>.75</PRELOADER_BACKGROUND_OPACITY>
<!-- Hexadecical background color of the preloader -->
<PRELOADER_TEXT_COLOR>000000</PRELOADER_TEXT_COLOR>
<!-- The opacity of preloader text -->
<PRELOADER_TEXT_OPACITY>1</PRELOADER_TEXT_OPACITY>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the preloader. -->
<PRELOADER_DIRECTION>left</PRELOADER_DIRECTION>
<!-- Use 'no_scale', 'fit', or 'fill_stage'. The scaling method of the projects. -->
<PROJECT_SCALING>fit</PROJECT_SCALING>
<!-- Use 'down', 'up', 'left', or 'right'. The slide direction of the project. -->
<PROJECT_DIRECTION>down</PROJECT_DIRECTION>
<!-- The horizontal offset of the project. Used mainly for external swfs -->
<OFFSET_HORIZONTAL>10</OFFSET_HORIZONTAL>
<!-- The vertical offset of the project. Used mainly for external swfs -->
<OFFSET_VERTICAL>25</OFFSET_VERTICAL>
</BANNER>