Text or images

Buy now  £29 Get support

You can scroll images or text or both.

Images

Images and Text

Text


  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: Text or images</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.horizontalTextScroll = {
  11.                 'items': 1,
  12.                 'height': 50,
  13.                 'width': 406,
  14.                 'arrows': false
  15.             };
  16.         </script>
  17.        
  18.     </head>
  19.     <body>
  20.        
  21.         <h3>Images</h3>
  22.         <div class="MagicScroll msborder">
  23.             <a href="#"><img src="images/shoes1.jpg" /></a>
  24.             <a href="#"><img src="images/shoes2.jpg" /></a>
  25.             <a href="#"><img src="images/shoes3.jpg" /></a>
  26.             <a href="#"><img src="images/shoes4.jpg" /></a>
  27.             <a href="#"><img src="images/shoes5.jpg" /></a>
  28.             <a href="#"><img src="images/shoes6.jpg" /></a>
  29.             <a href="#"><img src="images/shoes7.jpg" /></a>
  30.             <a href="#"><img src="images/shoes8.jpg" /></a>
  31.             <a href="#"><img src="images/shoes9.jpg" /></a>
  32.             <a href="#"><img src="images/shoes10.jpg" /></a>
  33.             <a href="#"><img src="images/shoes11.jpg" /></a>
  34.             <a href="#"><img src="images/shoes12.jpg" /></a>
  35.         </div>
  36.         <h3>Images and Text</h3>
  37.         <div class="MagicScroll msborder">
  38.             <a href="#"><img src="images/shoes1.jpg" />Purple shoes</a>
  39.             <a href="#"><img src="images/shoes2.jpg" />Silver shoes</a>
  40.             <a href="#"><img src="images/shoes3.jpg" />Pink shoes</a>
  41.             <a href="#"><img src="images/shoes4.jpg" />Black shoes</a>
  42.             <a href="#"><img src="images/shoes5.jpg" />Cream shoes</a>
  43.             <a href="#"><img src="images/shoes6.jpg" />White shoes</a>
  44.             <a href="#"><img src="images/shoes7.jpg" />Blue shoes</a>
  45.             <a href="#"><img src="images/shoes8.jpg" />Brown shoes</a>
  46.             <a href="#"><img src="images/shoes9.jpg" />Zebra shoes</a>
  47.             <a href="#"><img src="images/shoes10.jpg" />Checkered shoes</a>
  48.             <a href="#"><img src="images/shoes11.jpg" />Tissular shoes</a>
  49.             <a href="#"><img src="images/shoes12.jpg" />Gold shoes</a>
  50.         </div>
  51.         <h3>Text</h3>
  52.         <div class="MagicScroll msborder mstext" id="horizontalTextScroll">
  53.             <a href="http://magictoolbox.com/magiczoom/"><b>Magic Zoom&trade;</b><br/>Zoom right into an image and see every detail.</a>
  54.             <a href="http://magictoolbox.com/magiczoomplus/"><b>Magic Zoom Plus&trade;</b><br/>Zoom on hover, enlarge on click.</a>
  55.             <a href="http://magictoolbox.com/magicthumb/"><b>Magic Thumb&trade;</b><br/>Enlarge a small image into a full screen image.</a>
  56.             <a href="http://magictoolbox.com/magicmagnifyplus/"><b>Magic Magnify Plus&trade;</b><br/>Magnifying glass on hover and enlargement on click.</a>
  57.             <a href="http://magictoolbox.com/magicmagnify/"><b>Magic Magnify&trade;</b><br/>Magnifying glass reveals close-up as you hover over an image.</a>
  58.             <a href="http://magictoolbox.com/magictouch/"><b>Magic Touch&trade;</b><br/>If you need to display maximum possible detail.</a>
  59.             <a href="http://magictoolbox.com/magicslideshow/"><b>Magic Slideshow&trade;</b><br/>Smooth way to show lots of photos one after another.</a>
  60.         </div>
  61.        
  62.     </body>
  63. </html>