Active image caption under the fotorama
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- Fotorama -->
<div class="list">
<button>add more</button>
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/streetlook.jpg" data-caption="Streetlook" />
</div>
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/acapella.jpg" data-caption="Acapella" />
</div>
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/freakout.jpg" data-fit="contain" data-caption="Freakout" />
</div>
</div>
CSS
body {
margin: 10px;
}
.list {
padding: 50px 0;
}
JavaScript
$('button').click(() => setTimeout(() => {
$('.list').append(`
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/streetlook.jpg" data-caption="Streetlook" />
</div>
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/acapella.jpg" data-caption="Acapella" />
</div>
<div class="fotorama" data-loop="true" data-nav="thumbs" data-arrows="true" data-click="true" data-swipe="true" data-allowfullscreen="true" trackpad="true" >
<img src="http://s.fotorama.io/nyc/freakout.jpg" data-fit="contain" data-caption="Freakout" />
</div>
`);
// Кусок кода, который вам нужен
$('.fotorama:not([data-auto="false"])').fotorama();
}, 1000));