Magic Scroll™

Examples

Spacing

Buy now  £29 Get support

Set the size of the scroll area and the scrolling items.

No padding

Extra padding


  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Spacing</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.             #extrapadding .MagicScrollItem{
  9.                 padding: 10px;
  10.             }
  11.         </style>
  12.         <!-- link to magicscroll.js file -->
  13.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  14.        
  15.     </head>
  16.     <body>
  17.        
  18.  
  19.         <h3>No padding</h3>
  20.         <div class="MagicScroll" id="nopadding">
  21.             <a href="#aaa"><img src="images/shoes1.jpg" /></a>
  22.             <a href="#aaa"><img src="images/shoes2.jpg" /></a>
  23.             <a href="#aaa"><img src="images/shoes3.jpg" /></a>
  24.             <a href="#aaa"><img src="images/shoes4.jpg" /></a>
  25.             <a href="#aaa"><img src="images/shoes5.jpg" /></a>
  26.             <a href="#aaa"><img src="images/shoes6.jpg" /></a>
  27.             <a href="#aaa"><img src="images/shoes7.jpg" /></a>
  28.             <a href="#aaa"><img src="images/shoes8.jpg" /></a>
  29.             <a href="#aaa"><img src="images/shoes9.jpg" /></a>
  30.             <a href="#aaa"><img src="images/shoes10.jpg" /></a>
  31.             <a href="#aaa"><img src="images/shoes11.jpg" /></a>
  32.             <a href="#aaa"><img src="images/shoes12.jpg" /></a>
  33.         </div>
  34.         <h3>Extra padding</h3>
  35.         <div class="MagicScroll" id="extrapadding">
  36.             <a href="#aaa"><img src="images/shoes1.jpg" /></a>
  37.             <a href="#aaa"><img src="images/shoes2.jpg" /></a>
  38.             <a href="#aaa"><img src="images/shoes3.jpg" /></a>
  39.             <a href="#aaa"><img src="images/shoes4.jpg" /></a>
  40.             <a href="#aaa"><img src="images/shoes5.jpg" /></a>
  41.             <a href="#aaa"><img src="images/shoes6.jpg" /></a>
  42.             <a href="#aaa"><img src="images/shoes7.jpg" /></a>
  43.             <a href="#aaa"><img src="images/shoes8.jpg" /></a>
  44.             <a href="#aaa"><img src="images/shoes9.jpg" /></a>
  45.             <a href="#aaa"><img src="images/shoes10.jpg" /></a>
  46.             <a href="#aaa"><img src="images/shoes11.jpg" /></a>
  47.             <a href="#aaa"><img src="images/shoes12.jpg" /></a>
  48.         </div>
  49.        
  50.        
  51.     </body>
  52. </html>