Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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="http://fotorama.s3.amazonaws.com/4.4.4/fotorama.css" rel="stylesheet">
  <script src="http://fotorama.s3.amazonaws.com/4.4.4/fotorama.js"></script>
  <!-- Just don’t want to repeat this prefix in every img[src] -->
  <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/">
</head>
<body>
<!-- Fotorama -->
<div class="fotorama" data-width="700" data-ratio="700/467" data-max-width="100%">
    <div data-img="http://fotorama.s3.amazonaws.com/i/okonechnikov/30-lo.jpg">
        <div class="slide-text">
            <div class="slide-header">
               Heading
            </div>
            <div class="slide-description">
               Description
            </div>
        </div>
    </div>
    <div data-img="http://fotorama.s3.amazonaws.com/i/okonechnikov/19-lo.jpg">
        <div class="slide-text">
            <div class="slide-header">
               Heading
            </div>
            <div class="slide-description">
               Description
            </div>
        </div>
    </div>
</div>
<!-- © -->
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers