API/Callbacks

Buy now  £29 Get support

You can use standard href/onclick attributes to apply callbacks. You can use simple API to controll the scroll.

Magic Zoom Plus™

A combination of our two most popular products.
Zoom on hover, enlarge on click.
More info...

Magic Zoom™

Zoom right into an image and see every detail.
The greatest way to show off your products.
More info...

Magic Thumb™

Enlarge a small image into a full screen image upon click without using a popup.
More info...

Magic Magnify Plus™

Magnifying glass on hover and enlargement on click.
More info...

Magic Magnify™

Magnifying glass reveals close-up as you hover over an image.
More info...

Magic Touch™

If you need to display maximum possible detail, this incredible tool was made for you.
More info...

Magic Slideshow™

Smooth way to show lots of photos one after another.
More info...

Magic 360 Plus™

Spin your products round and zoom into them.
Incredibly life-like.
More info...

Magic 360™

Spin your products round in a 360 to see them from every angle.
More info...

  1. <html>
  2.     <head>
  3.         <title>Magic Scroll: API/Callbacks</title>
  4.        
  5.         <style type="text/css">
  6.             .products {
  7.                 position: relative;
  8.                 width: 700px;
  9.                 height: 160px;
  10.                 border: 1px solid #e1e1e1;
  11.                 border-bottom:none;
  12.             }
  13.             .products div {
  14.                 position: absolute;
  15.                 top: 0; left: 0;
  16.                 width: 700px;
  17.             }
  18.             .logo {
  19.                 display: inline-block;
  20.                 height: 130px;
  21.                 width: 170px !important;
  22.                 position: relative !important;
  23.                 float: left;
  24.                 margin: 20px;
  25.                 background: url(images/logos_big.jpg);
  26.             }
  27.             .logo.magiczoomplus, .logo.magiczoom {background-position: 0 0;}
  28.             .logo.magicthumb {background-position: -170px 0;}
  29.             .logo.magicmagnify, .logo.magicmagnifyplus {background-position: -340px 0;}
  30.             .logo.magicslideshow {background-position: -510px 0;}
  31.             .logo.magictouch {background-position: -680px 0;}
  32.             .logo.magic360, .logo.magic360plus {background-position: -850px 0;}
  33.         </style>
  34.         <!-- link to magicscroll.css file -->      
  35.         <link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>      
  36.         <!-- link to magicscroll.js file -->
  37.         <script src="magicscroll/magicscroll.js" type="text/javascript"></script>
  38.         <script type="text/javascript">
  39.             MagicScroll.options = {
  40.                 'width': 700,
  41.                 'height': 70,
  42.                 'items':3
  43.             };
  44.  
  45.             var notfound = 'magiczoomplus';
  46.             var current = 'magiczoomplus';
  47.             var list = ['magiczoomplus', 'magiczoom', 'magicthumb', 'magicmagnifyplus', 'magicmagnify', 'magictouch', 'magicslideshow', 'magic360plus', 'magic360'];
  48.  
  49.             function showProduct(id) {
  50.                 new $J.FX($mjs(current) || $mjs(notfound)).start({'opacity': [1, 0]});
  51.                 new $J.FX($mjs(id) || $mjs(notfound)).start({'opacity': [0, 1]});
  52.                 $mjs(current).style.zIndex = 1;
  53.                 $mjs(id).style.zIndex = 10;
  54.                 current = id;
  55.             }
  56.  
  57.             $mjs(document).je1('domready', function() {
  58.                 // set starting opacity
  59.                 for(i in list) {
  60.                     $mjs(list[i]) && $mjs(list[i]).j23(0);
  61.                 }
  62.                 $mjs(current).j23(1);
  63.                 $mjs(current).style.zIndex = 10;
  64.             });
  65.         </script>
  66.        
  67.     </head>
  68.     <body>
  69.        
  70.         <div class="products">
  71.             <div id="magiczoomplus">
  72.                 <div class="logo magiczoomplus"></div><h3>Magic Zoom Plus&#8482;</h3>
  73.                 A combination of our two most popular products.<br />Zoom on hover, enlarge on click.<br />
  74.                 <a href="http://www.magictoolbox.com/magiczoomplus">More info...</a>
  75.             </div>
  76.             <div id="magiczoom">
  77.                 <div class="logo magiczoom"></div><h3>Magic Zoom&#8482;</h3>
  78.                 Zoom right into an image and see every detail.<br />The greatest way to show off your products.<br />
  79.                 <a href="http://www.magictoolbox.com/magiczoom">More info...</a>
  80.             </div>
  81.             <div id="magicthumb">
  82.                 <div class="logo magicthumb"></div><h3>Magic Thumb&#8482;</h3>
  83.                 Enlarge a small image into a full screen image upon click without using a popup.<br />
  84.                 <a href="http://www.magictoolbox.com/magicthumb">More info...</a>
  85.             </div>
  86.             <div id="magicmagnifyplus">
  87.                 <div class="logo magicmagnifyplus"></div><h3>Magic Magnify Plus&#8482;</h3>
  88.                 Magnifying glass on hover and enlargement on click.<br />
  89.                 <a href="http://www.magictoolbox.com/magicmagnifyplus">More info...</a>
  90.             </div>
  91.             <div id="magicmagnify">
  92.                 <div class="logo magicmagnify"></div><h3>Magic Magnify&#8482;</h3>
  93.                 Magnifying glass reveals close-up as you hover over an image.<br />
  94.                 <a href="http://www.magictoolbox.com/magicmagnify">More info...</a>
  95.             </div>
  96.             <div id="magictouch">
  97.                 <div class="logo magictouch"></div><h3>Magic Touch&#8482;</h3>
  98.                 If you need to display maximum possible detail, this incredible tool was made for you.<br />
  99.                 <a href="http://www.magictoolbox.com/magictouch">More info...</a>
  100.             </div>
  101.             <div id="magicslideshow">
  102.                 <div class="logo magicslideshow"></div><h3>Magic Slideshow&#8482;</h3>
  103.                 Smooth way to show lots of photos one after another.<br />
  104.                 <a href="http://www.magictoolbox.com/magicslideshow">More info...</a>
  105.             </div>
  106.             <div id="magic360plus">
  107.                 <div class="logo magic360plus"></div><h3>Magic 360 Plus&#8482;</h3>
  108.                 Spin your products round and zoom into them.<br />Incredibly life-like.<br />
  109.                 <a href="http://www.magictoolbox.com/magic360plus">More info...</a>
  110.             </div>
  111.             <div id="magic360">
  112.                 <div class="logo magic360"></div><h3>Magic 360&#8482;</h3>
  113.                 Spin your products round in a 360 to see them from every angle.<br />
  114.                 <a href="http://www.magictoolbox.com/magic360">More info...</a>
  115.             </div>
  116.         </div>
  117.         <!-- define Magic Scroll -->
  118.         <div class="MagicScroll msborder">
  119.             <a href="javascript:void(0);" onclick="showProduct('magiczoomplus');"><img src="images/magiczoom.jpg" />Magic Zoom Plus&#8482;</a>
  120.             <a href="javascript:void(0);" onclick="showProduct('magiczoom');"><img src="images/magiczoom.jpg" />Magic Zoom&#8482;</a>
  121.             <a href="javascript:void(0);" onclick="showProduct('magicthumb');"><img src="images/magicthumb.jpg" />Magic Thumb&#8482;</a>
  122.             <a href="javascript:void(0);" onclick="showProduct('magicmagnifyplus');"><img src="images/magicmagnify.jpg" />Magic Magnify Plus&#8482;</a>
  123.             <a href="javascript:void(0);" onclick="showProduct('magicmagnify');"><img src="images/magicmagnify.jpg" />Magic Magnify&#8482;</a>
  124.             <a href="javascript:void(0);" onclick="showProduct('magictouch');"><img src="images/magictouch.jpg" />Magic Touch&#8482;</a>
  125.             <a href="javascript:void(0);" onclick="showProduct('magicslideshow');"><img src="images/magicslideshow.jpg" />Magic Slideshow&#8482;</a>
  126.             <a href="javascript:void(0);" onclick="showProduct('magic360plus');"><img src="images/magic360.jpg" />Magic 360 Plus&#8482;</a>
  127.             <a href="javascript:void(0);" onclick="showProduct('magic360');"><img src="images/magic360.jpg" />Magic 360&#8482;</a>
  128.         </div>
  129.        
  130.     </body>
  131. </html>