Fororama with images counter

by Alexey Zuev

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.min.js"></script>
<div class="fotorama">
    <img src="http://lorempixel.com/400/200" />
    <img src="http://lorempixel.com/400/200?v=2" />
    <img src="http://lorempixel.com/400/200?v=3" />
    <img src="http://lorempixel.com/400/200?v=4" />
    <img src="http://lorempixel.com/400/200?v=5" />
</div>

<div class="fotorama">
    <img src="http://lorempixel.com/400/200?v=6" />
    <img src="http://lorempixel.com/400/200?v=7" />
    <img src="http://lorempixel.com/400/200?v=8" />
    <img src="http://lorempixel.com/400/200?v=9" />
    <img src="http://lorempixel.com/400/200?v=10" />
</div>

<div class="fotorama">
    <img src="http://lorempixel.com/400/200?v=11" />
    <img src="http://lorempixel.com/400/200?v=12" />
    <img src="http://lorempixel.com/400/200?v=13" />
    <img src="http://lorempixel.com/400/200?v=14" />
    <img src="http://lorempixel.com/400/200?v=15" />
</div>

CSS

.info {
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(0,0,0,.6);
    padding: 5px 10px;
    color: #fff;
}

JavaScript

$(function () {
    $('.fotorama')
        .on('fotorama:ready', function (e, fotorama) {
        var info = $('<span class="info"/>');
        info.text((fotorama.activeIndex + 1) + ' of ' + fotorama.size);
        $(this).find('.fotorama__wrap').append(info);
    })
        .on('fotorama:show', function (e, fotorama, extra) {
        var info = $(this).find('.info');
        info.text((fotorama.activeIndex + 1) + ' of ' + fotorama.size);
    });
});