Fotoramovna demo page

Out-of-the-box

Use the .fotoramovna() method on the Fotorama element after the fotorama:ready event has fired.
<head> <!-- the Fotoramovna script --> <script src="fotoramovna.js"></script> <!-- basic padding (not neccessary) --> <link rel="stylesheet" href="fotoramovna.css"> </head> <body> <div class="fotorama" data-auto="false"> <a href="img/01.jpg" data-thumb="img/thumbs/01.jpg"></a> <a href="img/02.jpg" data-thumb="img/thumbs/02.jpg"></a> <a href="img/03.jpg" data-thumb="img/thumbs/03.jpg"></a> <a href="img/04.jpg" data-thumb="img/thumbs/04.jpg"></a> <a href="img/05.jpg" data-thumb="img/thumbs/05.jpg"></a> <a href="img/06.jpg" data-thumb="img/thumbs/06.jpg"></a> <a href="img/07.jpg" data-thumb="img/thumbs/07.jpg"></a> <a href="img/08.jpg" data-thumb="img/thumbs/08.jpg"></a> <a href="img/09.jpg" data-thumb="img/thumbs/09.jpg"></a> <a href="img/10.jpg" data-thumb="img/thumbs/10.jpg"></a> <a href="img/11.jpg" data-thumb="img/thumbs/11.jpg"></a> <a href="img/12.jpg" data-thumb="img/thumbs/12.jpg"></a> <a href="https://www.youtube.com/watch?v=Dif0oAevn50"></a> </div> <script type="text/javascript"> $(function() { $('.fotorama1') .on('fotorama:ready', function() { $(this).fotoramovna(); }) .fotorama(); }) </script> </body>
_.-^^---....,,-- _-- --_ < HTML >) | test | \._ _./ ```--. . , ; .--''' | | | .-=|| | |=-. `-=#$%&%$#=-' | ; :| _____.,-#%&$@%#&#~,._____

Testing via console

You can test Fotoramovna from your browser's console with a single command (don't forget to indicate the correct Fotorama selector). Try it out on the Fotorama homepage
$.getScript('http://vzryvy.ru/projects/fotoramovna/fotoramovna.js', function(){$('.fotorama').fotoramovna()})

Thumbnail dimensions

Fotoramovna uses Fotorama's thumbnail dimensions, as specified by data attributes. It doesn't account for data-attributes on individual thubnails (yet).
<div class="fotorama" data-auto="false" data-thumbwidth="100" data-thumbheight="100"> <!-- Fotorama content --> </div> <script type="text/javascript"> $(function() { $('.fotorama') .on('fotorama:ready', function() { $(this).fotoramovna(); }) .fotorama(); }) </script>

Centered thumbnails

Fotoramovna's thumbnails can either be justified or centered. If they are centered, their height if set to fit data-thumbheight by default (this behaviour is controlled by fitHeight property). In this mode Fotoramovna adds margin-right to cells equal to Fotorama's thumbmargin. It's fully fluid -- try resizing the page.
<div class="fotorama" data-auto="false" data-thumbwidth="100" data-thumbheight="100"> <!-- Fotorama content --> </div> <script type="text/javascript"> $(function() { $('.fotorama') .on('fotorama:ready', function() { $(this).fotoramovna({horizontalAlign: "center"}); }) .fotorama(); }) </script>

Styling

Fotoramovna can be fully styled. Just try not to touch inline styles (except for the frame '.fotoramovna__frame' -- just keep it absolutely positioned). Feel free to experiment!
<div class="fotorama fotorama-styles" data-auto="false" data-thumbwidth="100" data-thumbheight="100"> <!-- Fotorama content --> </div> <script type="text/javascript"> $(function() { $('.fotorama3') .on('fotorama:ready', function() { $(this).fotoramovna({classname: 'fotoramovna-styled'}); }) .fotorama(); }) </script> <style> .fotoramovna-styled { padding: 20px; background-color: darkgray; box-shadow: inset 0 0 20px rgba(0,0,0,0.4); width: 700px; margin: 0 auto; } .fotoramovna-styled__img { border: 1px gray solid; } /* it's ok to override frame's styles, except for `position` */ .fotoramovna-styled__frame[style] { border-color: rgb(200,0,0) !important; box-shadow: 0 0 10px rgba(255,0,0,0.5); } .fotoramovna-styled__wrapper-fotorama { padding-top: 20px; padding-bottom: 10px; } .fotoramovna-styled__cell { margin-bottom: 25px; } </style>

Options.

Fiddle with the options. Every time a value changes, Fotoramovna is destroyed and recreated with new values.

Create and destruct

Fotoramovna can be seamlessly destroyed -- with Fotorama returning to its initial state.
$('.fotorama').fotoramovna();

DOM manipulation

Elements inside Fotoramovna can be styled and it's DOM may be expanded. Always set font-size explicitly and use the $('fotorama').data('fotoramovna').refresh() method afterwards.
<div class="fotorama fotorama-dom" data-auto="false"> <!-- Fotorama content --> </div> <style> .fotoramovna-dom__cell { /* always put '!important' when styling cells */ width: 100px !important; } .fotoramovna-dom__sizewrapper { /* always put '!important' when styling cells */ margin: 0 auto; } .fotoramovna-dom .caption { margin-top: 10px; margin-bottom: 20px; font-size: 14px } </style> <script type="text/javascript"> $(function() { var captions = [ 'explosion 1', 'explosion 2', 'explosion 3', 'explosion 4', 'explosion 5', 'explosion 6', 'explosion 7', 'explosion 8', 'explosion 9', 'explosion 10', 'explosion 11', 'explosion 12', 'bridge explosion', ]; $('.fotorama-dom') .on('fotorama:ready', function() { $(this).fotoramovna({classname: 'fotoramovna-dom', verticalAlign: 'bottom'}); $.each(captions, function(i) { $('.fotoramovna-dom__cell') .eq(i) .append( '<div class="caption" style="margin-top: 10px; margin-bottom: 20px; font-size:14px">' + this + '</div>' ) }) $(this).data('fotoramovna').refresh(); }) .fotorama(); }) </script>

Responsiveness

The space between the thumbnails is fluid. The grid also has a min-width set based on the content of its rows. Fiddle with the input below to see how it works (it will trigger window's resize event).
px