<html>
<head>
<title>Magic Scroll: API/Callbacks</title>
<style type="text/css">
.products {
position: relative;
width: 700px;
height: 160px;
border: 1px solid #e1e1e1;
border-bottom:none;
}
.products div {
position: absolute;
top: 0; left: 0;
width: 700px;
}
.logo {
display: inline-block;
height: 130px;
width: 170px !important;
position: relative !important;
float: left;
margin: 20px;
background: url(images/logos_big.jpg);
}
.logo.magiczoomplus, .logo.magiczoom {background-position: 0 0;}
.logo.magicthumb {background-position: -170px 0;}
.logo.magicmagnify, .logo.magicmagnifyplus {background-position: -340px 0;}
.logo.magicslideshow {background-position: -510px 0;}
.logo.magictouch {background-position: -680px 0;}
.logo.magic360, .logo.magic360plus {background-position: -850px 0;}
</style>
<!-- link to magicscroll.css file -->
<link rel="stylesheet" type="text/css" href="magicscroll/magicscroll.css" media="screen"/>
<!-- link to magicscroll.js file -->
<script src="magicscroll/magicscroll.js" type="text/javascript"></script>
<script type="text/javascript">
MagicScroll.options = {
'width': 700,
'height': 70,
'items':3
};
var notfound = 'magiczoomplus';
var current = 'magiczoomplus';
var list = ['magiczoomplus', 'magiczoom', 'magicthumb', 'magicmagnifyplus', 'magicmagnify', 'magictouch', 'magicslideshow', 'magic360plus', 'magic360'];
function showProduct(id) {
new $J.FX($mjs(current) || $mjs(notfound)).start({'opacity': [1, 0]});
new $J.FX($mjs(id) || $mjs(notfound)).start({'opacity': [0, 1]});
$mjs(current).style.zIndex = 1;
$mjs(id).style.zIndex = 10;
current = id;
}
$mjs(document).je1('domready', function() {
// set starting opacity
for(i in list) {
$mjs(list[i]) && $mjs(list[i]).j23(0);
}
$mjs(current).j23(1);
$mjs(current).style.zIndex = 10;
});
</script>
</head>
<body>
<div class="products">
<div id="magiczoomplus">
<div class="logo magiczoomplus"></div><h3>Magic Zoom Plus™</h3>
A combination of our two most popular products.<br />Zoom on hover, enlarge on click.<br />
<a href="http://www.magictoolbox.com/magiczoomplus">More info...</a>
</div>
<div id="magiczoom">
<div class="logo magiczoom"></div><h3>Magic Zoom™</h3>
Zoom right into an image and see every detail.<br />The greatest way to show off your products.<br />
<a href="http://www.magictoolbox.com/magiczoom">More info...</a>
</div>
<div id="magicthumb">
<div class="logo magicthumb"></div><h3>Magic Thumb™</h3>
Enlarge a small image into a full screen image upon click without using a popup.<br />
<a href="http://www.magictoolbox.com/magicthumb">More info...</a>
</div>
<div id="magicmagnifyplus">
<div class="logo magicmagnifyplus"></div><h3>Magic Magnify Plus™</h3>
Magnifying glass on hover and enlargement on click.<br />
<a href="http://www.magictoolbox.com/magicmagnifyplus">More info...</a>
</div>
<div id="magicmagnify">
<div class="logo magicmagnify"></div><h3>Magic Magnify™</h3>
Magnifying glass reveals close-up as you hover over an image.<br />
<a href="http://www.magictoolbox.com/magicmagnify">More info...</a>
</div>
<div id="magictouch">
<div class="logo magictouch"></div><h3>Magic Touch™</h3>
If you need to display maximum possible detail, this incredible tool was made for you.<br />
<a href="http://www.magictoolbox.com/magictouch">More info...</a>
</div>
<div id="magicslideshow">
<div class="logo magicslideshow"></div><h3>Magic Slideshow™</h3>
Smooth way to show lots of photos one after another.<br />
<a href="http://www.magictoolbox.com/magicslideshow">More info...</a>
</div>
<div id="magic360plus">
<div class="logo magic360plus"></div><h3>Magic 360 Plus™</h3>
Spin your products round and zoom into them.<br />Incredibly life-like.<br />
<a href="http://www.magictoolbox.com/magic360plus">More info...</a>
</div>
<div id="magic360">
<div class="logo magic360"></div><h3>Magic 360™</h3>
Spin your products round in a 360 to see them from every angle.<br />
<a href="http://www.magictoolbox.com/magic360">More info...</a>
</div>
</div>
<!-- define Magic Scroll -->
<div class="MagicScroll msborder">
<a href="javascript:void(0);" onclick="showProduct('magiczoomplus');"><img src="images/magiczoom.jpg" />Magic Zoom Plus™</a>
<a href="javascript:void(0);" onclick="showProduct('magiczoom');"><img src="images/magiczoom.jpg" />Magic Zoom™</a>
<a href="javascript:void(0);" onclick="showProduct('magicthumb');"><img src="images/magicthumb.jpg" />Magic Thumb™</a>
<a href="javascript:void(0);" onclick="showProduct('magicmagnifyplus');"><img src="images/magicmagnify.jpg" />Magic Magnify Plus™</a>
<a href="javascript:void(0);" onclick="showProduct('magicmagnify');"><img src="images/magicmagnify.jpg" />Magic Magnify™</a>
<a href="javascript:void(0);" onclick="showProduct('magictouch');"><img src="images/magictouch.jpg" />Magic Touch™</a>
<a href="javascript:void(0);" onclick="showProduct('magicslideshow');"><img src="images/magicslideshow.jpg" />Magic Slideshow™</a>
<a href="javascript:void(0);" onclick="showProduct('magic360plus');"><img src="images/magic360.jpg" />Magic 360 Plus™</a>
<a href="javascript:void(0);" onclick="showProduct('magic360');"><img src="images/magic360.jpg" />Magic 360™</a>
</div>
</body>
</html>