Link on img

Goggle, Apple, Wikipedia

by Ahmad Najiullah

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.3/fotorama.js"></script>
<!-- Fotorama -->
<div class="fotorama" data-width="500" data-fit="cover" data-max-width="100%" data-ratio="16/9"   data-allowfullscreen="true"  data-loop="true" data-autoplay="true">
    <div data-img="http://s.fotorama.io/1.jpg"  data-caption="One"><a href="http://google.com/" target="_blank" ></a></div>
    <div data-img="http://s.fotorama.io/2.jpg" data-caption="two"><a href="http://apple.com/" ></a></div>
    <div data-img="http://s.fotorama.io/3.jpg"  data-caption="three"><a href="http://wikipedia.org/"></a></div>
</div>

<!-- © -->    
<p>Photos <a href="http://okonet.ru/">by Andrey Okonetchnikov</a></p>

CSS

body {
    margin: 10px;
}

/* Stretch the links */
.fotorama__html div,
.fotorama__html a {
    display: block;
    height: 100%;
    /* Transparent links are not clickable in IE,
       but non-existent background fixes this.
      (Put an empty 1×1 image here to avoid
       errors in console.) */
    background: url(_.gif);
}

JavaScript

// Nothing there :-)
// Fotorama initializes automatically.