Items in view

Buy now  £29 Get support

Choose how many items can be in view at one time (the default is 3). Also choose how many items should jump at one time.

4 images, jump 4

4 images, jump 3

2 images, jump 2


  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Items in view</title>
  4.        
  5.         <!-- link to magicscroll.css file -->      
  6.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>      
  7.         <!-- link to magicscroll.js file -->
  8.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  9.         <script type="text/javascript">
  10.             MagicScroll.extraOptions.scroll1 = {
  11.                 'items': 4,
  12.                 'step': 4
  13.             };
  14.             MagicScroll.extraOptions.scroll2 = {
  15.                 'items': 4,
  16.                 'step': 3
  17.             };
  18.             MagicScroll.extraOptions.scroll3 = {
  19.                 'items': 2,
  20.                 'step': 2
  21.             };
  22.         </script>
  23.        
  24.     </head>
  25.     <body>
  26.        
  27.         <h3>4 images, jump 4</h3>
  28.         <div class="MagicScroll msborder" id="scroll1">
  29.             <a href="#"><img src="images/shoes1.jpg" /></a>
  30.             <a href="#"><img src="images/shoes2.jpg" /></a>
  31.             <a href="#"><img src="images/shoes3.jpg" /></a>
  32.             <a href="#"><img src="images/shoes4.jpg" /></a>
  33.             <a href="#"><img src="images/shoes5.jpg" /></a>
  34.             <a href="#"><img src="images/shoes6.jpg" /></a>
  35.             <a href="#"><img src="images/shoes7.jpg" /></a>
  36.             <a href="#"><img src="images/shoes8.jpg" /></a>
  37.             <a href="#"><img src="images/shoes9.jpg" /></a>
  38.             <a href="#"><img src="images/shoes10.jpg" /></a>
  39.             <a href="#"><img src="images/shoes11.jpg" /></a>
  40.             <a href="#"><img src="images/shoes12.jpg" /></a>
  41.         </div>
  42.         <h3>4 images, jump 3</h3>
  43.         <div class="MagicScroll msborder" id="scroll2">
  44.             <a href="#"><img src="images/shoes1.jpg" /></a>
  45.             <a href="#"><img src="images/shoes2.jpg" /></a>
  46.             <a href="#"><img src="images/shoes3.jpg" /></a>
  47.             <a href="#"><img src="images/shoes4.jpg" /></a>
  48.             <a href="#"><img src="images/shoes5.jpg" /></a>
  49.             <a href="#"><img src="images/shoes6.jpg" /></a>
  50.             <a href="#"><img src="images/shoes7.jpg" /></a>
  51.             <a href="#"><img src="images/shoes8.jpg" /></a>
  52.             <a href="#"><img src="images/shoes9.jpg" /></a>
  53.             <a href="#"><img src="images/shoes10.jpg" /></a>
  54.             <a href="#"><img src="images/shoes11.jpg" /></a>
  55.             <a href="#"><img src="images/shoes12.jpg" /></a>
  56.         </div>
  57.         <h3>2 images, jump 2</h3>
  58.         <div class="MagicScroll msborder" id="scroll3">
  59.             <a href="#"><img src="images/shoes1.jpg" /></a>
  60.             <a href="#"><img src="images/shoes2.jpg" /></a>
  61.             <a href="#"><img src="images/shoes3.jpg" /></a>
  62.             <a href="#"><img src="images/shoes4.jpg" /></a>
  63.             <a href="#"><img src="images/shoes5.jpg" /></a>
  64.             <a href="#"><img src="images/shoes6.jpg" /></a>
  65.             <a href="#"><img src="images/shoes7.jpg" /></a>
  66.             <a href="#"><img src="images/shoes8.jpg" /></a>
  67.             <a href="#"><img src="images/shoes9.jpg" /></a>
  68.             <a href="#"><img src="images/shoes10.jpg" /></a>
  69.             <a href="#"><img src="images/shoes11.jpg" /></a>
  70.             <a href="#"><img src="images/shoes12.jpg" /></a>
  71.         </div>
  72.        
  73.     </body>
  74. </html>