<html>
<head>
<title>Magic Slideshow: API examples</title>
<!-- link to magicslideshow.css file -->
<link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>
<!-- link to magicslideshow.js file -->
<script type="text/javascript">
var MagicSlideshowOptions = {
'width': '600px',
'height': '300px',
'selectors': 'bottom'
};
</script>
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
<!-- set options -->
</head>
<body>
<p>
<a href="javascript:void(0);" onclick="MagicSlideshow.start('slide-1');return false;">Start</a><b> | </b>
<a href="javascript:void(0);" onclick="MagicSlideshow.stop('slide-1');return false;">Stop</a><b> | </b>
<a href="javascript:void(0);" onclick="MagicSlideshow.refresh('slide-1');return false;">Refresh</a><b> | </b>
</p>
<p>
<a href="javascript:void(0);" onclick="MagicSlideshow.prev('slide-1');return false;">Previous</a><b> | </b>
<a href="javascript:void(0);" onclick="if ( 'false'==this.getAttribute('data-play') ) { MagicSlideshow.play('slide-1'); this.innerHTML = 'Pause'; this.setAttribute('data-play', 'true'); } else { MagicSlideshow.pause('slide-1'); this.innerHTML = 'Play'; this.setAttribute('data-play', 'false'); } return false;" data-play="true">Pause</a><b> | </b>
<a href="javascript:void(0);" onclick="MagicSlideshow.next('slide-1');return false;">Next</a><b> | </b>
</p>
<div class="MagicSlideshow" id="slide-1">
<img src="images/places-01-600.jpg"/>
<img src="images/places-02-600.jpg"/>
<img src="images/places-03-600.jpg"/>
<img src="images/places-04-600.jpg"/>
<img src="images/places-05-600.jpg"/>
<img src="images/places-06-600.jpg"/>
<img src="images/places-07-600.jpg"/>
</div>
</body>
</html>