Custom data example

by exizt

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/fotorama.js"></script>
<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="http://fotorama.s3.amazonaws.com/i/nyc/">
<!-- Fotorama -->
<div class="fotorama" data-width="100%" data-ratio="500/333" data-fit="cover" data-nav="false" data-auto="false">
    <img src="http://fotorama.s3.amazonaws.com/i/nyc/streetlook.jpg" data-author="Alexei Lebedev" data-title="Streetlook" />
    <img src="http://fotorama.s3.amazonaws.com/i/okonechnikov/1-lo.jpg" data-author="Andrey Okonechnikov" data-title="Alpen Fog" />
</div>
<p class="fotorama-caption"></p>

SCSS

body {
    margin: 10px;
    background: #1d1d1d;
}

.fotorama,
.fotorama-caption {
    width: 500px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.fotorama-caption {
    text-align: center;
    line-height: 1.5;
    color: #838484;
    font-family: Georgia, serif;
    strong {
        font-weight: normal;
        color: #eee;
    }
}

JavaScript

function printHeight() {
    $(".fotorama-caption").html(($(".fotorama").outerHeight()))
}

$('.fotorama')
    .on('fotorama:show', function (e, fotorama) {
    printHeight()
})
    .fotorama();


$(".fotorama-caption").on('click', function () {
    printHeight()
})