So i wanted to do a small contribution about a flash slider from cu3er.
Todo list
1. Download cu3er http://www.progressivered.com/cu3er/
2. Upload all files to /catalog/view/theme/*your theme*/ except demo.htm
3. Create a file called slider.php insert following code.
<script type="text/javascript" src="js/swfobject/swfobject.js"></script>
<div id="site_banner">
<script type="text/javascript">
var flashvars = {};
flashvars.xml = "config.xml";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("cu3er.swf", "cu3er-container", "450", "200", "9", "js/swfobject/expressInstall.swf", flashvars, attributes);
</script>
<div id="cu3er-container"></div>
</div>
<!-- end slide show -->
4. After creation of slider.php save this file in /catalog/view/theme/*your theme*/
5. Open up home.tpl /catalog/view/theme/*your theme*/template/
6. Edit an put where you want the slider to show up.
<div id="frame">
<iframe src ="catalog/view/theme/*your theme*/slider.php" scrolling="no" frameborder="0"></iframe></div>
7. Open up /catalog/view/theme/*your theme*/stylesheet/ and your stylesheet css file.
8. Create a new div class by inserting the following code to the stylesheet.
#site_banner{
width:600px;
height:250px;
margin-left:auto;
margin-right:auto;
background-color:#E1E1E1;
}
/* cu3er banner rotator position */
#cu3er-container {
width:600px;
height:250px;
outline:0;
}
div#frame iframe {
width: 550px;
height: 241px;
margin: 10px 0 0 0;
padding: 50;
left: 45px;
top: -10px;
position: relative;
}
9. Modify the size/posistion where you want the slider to appear.
7. This is just a default easy modify you can customize it to however you want it.
I might have overdone it a bit with all div classes but this is how i've done it and it works
