<html>
<head>
<title>Magic Scroll: HTML Content</title>
<!-- link to magicscroll.css file -->
<link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
<style type="text/css">
.MagicScrollItem img {
float:left;
margin:0 10px 0 0;
}
.MagicScrollItem {
padding:0 !important;
border:none !important;
text-align:left !important;
}
</style>
<!-- link to magicscroll.js file -->
<script src="magicscroll/magicscroll.js" type="text/javascript"></script>
<script type="text/javascript">
MagicScroll.extraOptions.scroll1 = {
'width': 350,
'height': 80,
'items': 1,
'duration': 300,
'item-tag': 'div'
};
MagicScroll.extraOptions.scroll2 = {
'width': 700,
'height': 80,
'items': 2,
'arrows':false,
'duration': 300,
'item-tag': 'div'
};
</script>
</head>
<body>
<!-- define Magic Scroll -->
<div class="MagicScroll msborder" id="scroll1">
<div>
<img src="images/shoes1.jpg" />
<a href="#">Purple shoes</a><br/>
Product description<br/>
<b>Price:</b> $10
</div>
<div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="flash" align="middle">
<param name="movie" value="images/flash.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99cc33" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/flash.swf" width="100%" height="100%">
<param name="movie" value="images/flash.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99cc33" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div>
<img src="images/shoes2.jpg" /><a href="#">Silver shoes</a><br/>
Product description<br/>
<b>Price:</b> $20
</div>
<div>
<div style="background:red;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes3.jpg" /><a href="#">Pink shoes</a><br/>
Product description<br/>
<b>Price:</b> $30
</div>
<div>
<div style="background:green;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes4.jpg" /><a href="#">Black shoes</a><br/>
Product description<br/>
<b>Price:</b> $40
</div>
<div>
<div style="background:blue;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes5.jpg" /><a href="#">Cream shoes</a><br/>
Product description<br/>
<b>Price:</b> $50
</div>
<div>
<img src="images/shoes6.jpg" /><a href="#">White shoes</a><br/>
Product description<br/>
<b>Price:</b> $60
</div>
<div>
<img src="images/shoes7.jpg" /><a href="#">Blue shoes</a><br/>
Product description<br/>
<b>Price:</b> $70
</div>
<div>
<img src="images/shoes8.jpg" /><a href="#">Brown shoes</a><br/>
Product description<br/>
<b>Price:</b> $80
</div>
<div>
<img src="images/shoes9.jpg" /><a href="#">Zebra shoes</a><br/>
Product description<br/>
<b>Price:</b> $90
</div>
<div>
<img src="images/shoes10.jpg"/><a href="#">Checkered shoes</a><br/>
Product description<br/>
<b>Price:</b> $100
</div>
<div>
<img src="images/shoes11.jpg"/><a href="#">Tissular shoes</a><br/>
Product description<br/>
<b>Price:</b> $110
</div>
<div>
<img src="images/shoes12.jpg"/><a href="#">Gold shoes</a><br/>
Product description<br/>
<b>Price:</b> $120
</div>
</div>
<br/><br/>
<div class="MagicScroll msborder" id="scroll2">
<div>
<img src="images/shoes1.jpg" />
<a href="#">Purple shoes</a><br/>
Product description<br/>
<b>Price:</b> $10
</div>
<div>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="flash" align="middle">
<param name="movie" value="images/flash.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99cc33" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="images/flash.swf" width="100%" height="100%">
<param name="movie" value="images/flash.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#99cc33" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
<div>
<img src="images/shoes2.jpg" /><a href="#">Silver shoes</a><br/>
Product description<br/>
<b>Price:</b> $20
</div>
<div>
<div style="background:red;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes3.jpg" /><a href="#">Pink shoes</a><br/>
Product description<br/>
<b>Price:</b> $30
</div>
<div>
<div style="background:green;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes4.jpg" /><a href="#">Black shoes</a><br/>
Product description<br/>
<b>Price:</b> $40
</div>
<div>
<div style="background:blue;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
</div>
<div>
<img src="images/shoes5.jpg" /><a href="#">Cream shoes</a><br/>
Product description<br/>
<b>Price:</b> $50
</div>
<div>
<img src="images/shoes6.jpg" /><a href="#">White shoes</a><br/>
Product description<br/>
<b>Price:</b> $60
</div>
<div>
<img src="images/shoes7.jpg" /><a href="#">Blue shoes</a><br/>
Product description<br/>
<b>Price:</b> $70
</div>
<div>
<img src="images/shoes8.jpg" /><a href="#">Brown shoes</a><br/>
Product description<br/>
<b>Price:</b> $80
</div>
<div>
<img src="images/shoes9.jpg" /><a href="#">Zebra shoes</a><br/>
Product description<br/>
<b>Price:</b> $90
</div>
<div>
<img src="images/shoes10.jpg"/><a href="#">Checkered shoes</a><br/>
Product description<br/>
<b>Price:</b> $100
</div>
<div>
<img src="images/shoes11.jpg"/><a href="#">Tissular shoes</a><br/>
Product description<br/>
<b>Price:</b> $110
</div>
<div>
<img src="images/shoes12.jpg"/><a href="#">Gold shoes</a><br/>
Product description<br/>
<b>Price:</b> $120
</div>
</div>
</body>
</html>