<html>
<head>
<title>Magic Scroll: Items in view</title>
<!-- 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.extraOptions.scroll1 = {
'items': 4,
'step': 4
};
MagicScroll.extraOptions.scroll2 = {
'items': 4,
'step': 3
};
MagicScroll.extraOptions.scroll3 = {
'items': 2,
'step': 2
};
</script>
</head>
<body>
<h3>4 images, jump 4</h3>
<div class="MagicScroll msborder" id="scroll1">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>4 images, jump 3</h3>
<div class="MagicScroll msborder" id="scroll2">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
<h3>2 images, jump 2</h3>
<div class="MagicScroll msborder" id="scroll3">
<a href="#"><img src="images/shoes1.jpg" /></a>
<a href="#"><img src="images/shoes2.jpg" /></a>
<a href="#"><img src="images/shoes3.jpg" /></a>
<a href="#"><img src="images/shoes4.jpg" /></a>
<a href="#"><img src="images/shoes5.jpg" /></a>
<a href="#"><img src="images/shoes6.jpg" /></a>
<a href="#"><img src="images/shoes7.jpg" /></a>
<a href="#"><img src="images/shoes8.jpg" /></a>
<a href="#"><img src="images/shoes9.jpg" /></a>
<a href="#"><img src="images/shoes10.jpg" /></a>
<a href="#"><img src="images/shoes11.jpg" /></a>
<a href="#"><img src="images/shoes12.jpg" /></a>
</div>
</body>
</html>