<html>
<head>
<title>Magic Slideshow: Vertical Slideshow</title>
<!-- link to magicslideshow.css file -->
<link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>
<!-- link to magicslideshow.js file -->
<script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
<style type="text/css">
.MagicSlideshow { border: 0; }
</style>
</head>
<body>
<!-- define Magic Slideshow -->
<div class="MagicSlideshow" data-options="orientation: vertical; width: 600px; height: 281px; caption: false;">
<img src="images/places-01-600.jpg" data-caption="Descriptive text can go here."/>
<img src="images/places-02-600.jpg" data-caption="Write as much text here as you like."/>
<img src="images/places-03-600.jpg" data-caption="You can use HTML such as <b>bold</b>, <i>italic</i> and <a href='http://magictoolbox.com/magicslideshow/'>links</a>."/>
<img src="images/places-04-600.jpg" data-caption="Control the style of this text with CSS."/>
<img src="images/places-05-600.jpg" data-caption="You can have one or two sets of text, or none at all." title="Title"/>
<img src="images/places-06-600.jpg"/>
<img src="images/places-07-600.jpg" data-caption="Try the <a href='example2.html'>other</a> <a href='example3.html'>slideshow</a> <a href='example4.html'>examples</a> for more ideas."/>
</div>
</body>
</html>