<!DOCTYPE html>
<html>
<head>
<title>Basic fotorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- Fotorama -->
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://s.fotorama.io/okonechnikov/">
</head>
<body>
<!-- Fotorama -->
<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%">
<img src="1-lo.jpg">
<img src="2-lo.jpg">
<img src="9-lo.jpg">
<img src="6-lo.jpg">
<img src="5-lo.jpg">
</div>
<div class="fotorama" data-nav="thumbs">
<a href="1-lo.jpg"><img src="1-lo.jpg"></a>
<a href="1-lo.jpg"><img src="1-lo.jpg"></a>
</div>
<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>