HTML Content

Buy now  £29 Get support

Purple shoes
Product description
Price: $10
Silver shoes
Product description
Price: $20
SALE 50%
Pink shoes
Product description
Price: $30
SALE 50%
Black shoes
Product description
Price: $40
SALE 50%
Cream shoes
Product description
Price: $50
White shoes
Product description
Price: $60
Blue shoes
Product description
Price: $70
Brown shoes
Product description
Price: $80
Zebra shoes
Product description
Price: $90
Checkered shoes
Product description
Price: $100
Tissular shoes
Product description
Price: $110
Gold shoes
Product description
Price: $120


Purple shoes
Product description
Price: $10
Silver shoes
Product description
Price: $20
SALE 50%
Pink shoes
Product description
Price: $30
SALE 50%
Black shoes
Product description
Price: $40
SALE 50%
Cream shoes
Product description
Price: $50
White shoes
Product description
Price: $60
Blue shoes
Product description
Price: $70
Brown shoes
Product description
Price: $80
Zebra shoes
Product description
Price: $90
Checkered shoes
Product description
Price: $100
Tissular shoes
Product description
Price: $110
Gold shoes
Product description
Price: $120

  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: HTML Content</title>
  4.        
  5.         <!-- link to magicscroll.css file -->      
  6.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>      
  7.         <style type="text/css">
  8.             .MagicScrollItem img {
  9.                 float:left;
  10.                 margin:0 10px 0 0;
  11.             }
  12.             .MagicScrollItem {
  13.                 padding:0 !important;
  14.                 border:none !important;
  15.                 text-align:left !important;
  16.             }
  17.         </style>
  18.         <!-- link to magicscroll.js file -->
  19.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  20.         <script type="text/javascript">
  21.             MagicScroll.extraOptions.scroll1 = {
  22.                 'width': 350,
  23.                 'height': 80,
  24.                 'items': 1,
  25.                 'duration': 300,
  26.                 'item-tag': 'div'
  27.             };
  28.             MagicScroll.extraOptions.scroll2 = {
  29.                 'width': 700,
  30.                 'height': 80,
  31.                 'items': 2,
  32.                 'arrows':false,
  33.                 'duration': 300,
  34.                 'item-tag': 'div'
  35.             };
  36.         </script>
  37.        
  38.     </head>
  39.     <body>
  40.        
  41.         <!-- define Magic Scroll -->
  42.         <div class="MagicScroll msborder" id="scroll1">
  43.             <div>
  44.                 <img src="images/shoes1.jpg" />
  45.                 <a href="#">Purple shoes</a><br/>
  46.                 Product description<br/>
  47.                 <b>Price:</b> $10
  48.             </div>
  49.             <div>
  50.                 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="flash" align="middle">
  51.                     <param name="movie" value="images/flash.swf" />
  52.                     <param name="quality" value="high" />
  53.                     <param name="bgcolor" value="#99cc33" />
  54.                     <param name="play" value="true" />
  55.                     <param name="loop" value="true" />
  56.                     <param name="wmode" value="window" />
  57.                     <param name="scale" value="showall" />
  58.                     <param name="menu" value="true" />
  59.                     <param name="devicefont" value="false" />
  60.                     <param name="salign" value="" />
  61.                     <param name="allowScriptAccess" value="sameDomain" />
  62.                     <!--[if !IE]>-->
  63.                     <object type="application/x-shockwave-flash" data="images/flash.swf" width="100%" height="100%">
  64.                         <param name="movie" value="images/flash.swf" />
  65.                         <param name="quality" value="high" />
  66.                         <param name="bgcolor" value="#99cc33" />
  67.                         <param name="play" value="true" />
  68.                         <param name="loop" value="true" />
  69.                         <param name="wmode" value="window" />
  70.                         <param name="scale" value="showall" />
  71.                         <param name="menu" value="true" />
  72.                         <param name="devicefont" value="false" />
  73.                         <param name="salign" value="" />
  74.                         <param name="allowScriptAccess" value="sameDomain" />
  75.                     <!--<![endif]-->
  76.                         <a href="http://www.adobe.com/go/getflash">
  77.                             <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  78.                         </a>
  79.                     <!--[if !IE]>-->
  80.                     </object>
  81.                     <!--<![endif]-->
  82.                 </object>
  83.             </div>            
  84.             <div>
  85.                 <img src="images/shoes2.jpg" /><a href="#">Silver shoes</a><br/>
  86.                 Product description<br/>
  87.                 <b>Price:</b> $20
  88.             </div>
  89.             <div>
  90.                 <div style="background:red;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  91.             </div>
  92.             <div>
  93.                 <img src="images/shoes3.jpg" /><a href="#">Pink shoes</a><br/>
  94.                 Product description<br/>
  95.                 <b>Price:</b> $30
  96.             </div>
  97.             <div>
  98.                 <div style="background:green;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  99.             </div>
  100.             <div>
  101.                 <img src="images/shoes4.jpg" /><a href="#">Black shoes</a><br/>
  102.                 Product description<br/>
  103.                 <b>Price:</b> $40
  104.             </div>
  105.             <div>
  106.                 <div style="background:blue;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  107.             </div>
  108.             <div>
  109.                 <img src="images/shoes5.jpg" /><a href="#">Cream shoes</a><br/>
  110.                 Product description<br/>
  111.                 <b>Price:</b> $50
  112.             </div>
  113.             <div>
  114.                 <img src="images/shoes6.jpg" /><a href="#">White shoes</a><br/>
  115.                 Product description<br/>
  116.                 <b>Price:</b> $60
  117.             </div>
  118.             <div>
  119.                 <img src="images/shoes7.jpg" /><a href="#">Blue shoes</a><br/>
  120.                 Product description<br/>
  121.                 <b>Price:</b> $70
  122.             </div>
  123.             <div>
  124.                 <img src="images/shoes8.jpg" /><a href="#">Brown shoes</a><br/>
  125.                 Product description<br/>
  126.                 <b>Price:</b> $80
  127.             </div>
  128.             <div>
  129.                 <img src="images/shoes9.jpg" /><a href="#">Zebra shoes</a><br/>
  130.                 Product description<br/>
  131.                 <b>Price:</b> $90
  132.             </div>
  133.             <div>
  134.                 <img src="images/shoes10.jpg"/><a href="#">Checkered shoes</a><br/>
  135.                 Product description<br/>
  136.                 <b>Price:</b> $100
  137.             </div>
  138.             <div>
  139.                 <img src="images/shoes11.jpg"/><a href="#">Tissular shoes</a><br/>
  140.                 Product description<br/>
  141.                 <b>Price:</b> $110
  142.             </div>
  143.             <div>
  144.                 <img src="images/shoes12.jpg"/><a href="#">Gold shoes</a><br/>
  145.                 Product description<br/>
  146.                 <b>Price:</b> $120
  147.             </div>
  148.         </div>
  149.        
  150.         <br/><br/>
  151.  
  152.         <div class="MagicScroll msborder" id="scroll2">
  153.             <div>
  154.                 <img src="images/shoes1.jpg" />
  155.                 <a href="#">Purple shoes</a><br/>
  156.                 Product description<br/>
  157.                 <b>Price:</b> $10
  158.             </div>
  159.             <div>
  160.                 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="flash" align="middle">
  161.                     <param name="movie" value="images/flash.swf" />
  162.                     <param name="quality" value="high" />
  163.                     <param name="bgcolor" value="#99cc33" />
  164.                     <param name="play" value="true" />
  165.                     <param name="loop" value="true" />
  166.                     <param name="wmode" value="window" />
  167.                     <param name="scale" value="showall" />
  168.                     <param name="menu" value="true" />
  169.                     <param name="devicefont" value="false" />
  170.                     <param name="salign" value="" />
  171.                     <param name="allowScriptAccess" value="sameDomain" />
  172.                     <!--[if !IE]>-->
  173.                     <object type="application/x-shockwave-flash" data="images/flash.swf" width="100%" height="100%">
  174.                         <param name="movie" value="images/flash.swf" />
  175.                         <param name="quality" value="high" />
  176.                         <param name="bgcolor" value="#99cc33" />
  177.                         <param name="play" value="true" />
  178.                         <param name="loop" value="true" />
  179.                         <param name="wmode" value="window" />
  180.                         <param name="scale" value="showall" />
  181.                         <param name="menu" value="true" />
  182.                         <param name="devicefont" value="false" />
  183.                         <param name="salign" value="" />
  184.                         <param name="allowScriptAccess" value="sameDomain" />
  185.                     <!--<![endif]-->
  186.                         <a href="http://www.adobe.com/go/getflash">
  187.                             <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  188.                         </a>
  189.                     <!--[if !IE]>-->
  190.                     </object>
  191.                     <!--<![endif]-->
  192.                 </object>
  193.             </div>            
  194.             <div>
  195.                 <img src="images/shoes2.jpg" /><a href="#">Silver shoes</a><br/>
  196.                 Product description<br/>
  197.                 <b>Price:</b> $20
  198.             </div>
  199.             <div>
  200.                 <div style="background:red;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  201.             </div>
  202.             <div>
  203.                 <img src="images/shoes3.jpg" /><a href="#">Pink shoes</a><br/>
  204.                 Product description<br/>
  205.                 <b>Price:</b> $30
  206.             </div>
  207.             <div>
  208.                 <div style="background:green;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  209.             </div>
  210.             <div>
  211.                 <img src="images/shoes4.jpg" /><a href="#">Black shoes</a><br/>
  212.                 Product description<br/>
  213.                 <b>Price:</b> $40
  214.             </div>
  215.             <div>
  216.                 <div style="background:blue;color:#fff;font-size:40px;padding:10px;text-align:center;height:80px;line-height:60px;">SALE 50%</div>
  217.             </div>
  218.             <div>
  219.                 <img src="images/shoes5.jpg" /><a href="#">Cream shoes</a><br/>
  220.                 Product description<br/>
  221.                 <b>Price:</b> $50
  222.             </div>
  223.             <div>
  224.                 <img src="images/shoes6.jpg" /><a href="#">White shoes</a><br/>
  225.                 Product description<br/>
  226.                 <b>Price:</b> $60
  227.             </div>
  228.             <div>
  229.                 <img src="images/shoes7.jpg" /><a href="#">Blue shoes</a><br/>
  230.                 Product description<br/>
  231.                 <b>Price:</b> $70
  232.             </div>
  233.             <div>
  234.                 <img src="images/shoes8.jpg" /><a href="#">Brown shoes</a><br/>
  235.                 Product description<br/>
  236.                 <b>Price:</b> $80
  237.             </div>
  238.             <div>
  239.                 <img src="images/shoes9.jpg" /><a href="#">Zebra shoes</a><br/>
  240.                 Product description<br/>
  241.                 <b>Price:</b> $90
  242.             </div>
  243.             <div>
  244.                 <img src="images/shoes10.jpg"/><a href="#">Checkered shoes</a><br/>
  245.                 Product description<br/>
  246.                 <b>Price:</b> $100
  247.             </div>
  248.             <div>
  249.                 <img src="images/shoes11.jpg"/><a href="#">Tissular shoes</a><br/>
  250.                 Product description<br/>
  251.                 <b>Price:</b> $110
  252.             </div>
  253.             <div>
  254.                 <img src="images/shoes12.jpg"/><a href="#">Gold shoes</a><br/>
  255.                 Product description<br/>
  256.                 <b>Price:</b> $120
  257.             </div>
  258.         </div>
  259.        
  260.        
  261.     </body>
  262. </html>