English is not my first language, so sorry for my mistakes ;)
I want to have all thumbnails in a block instead in a slider example (plus signs are images)
NOT:
< +++++++++ > (slider with navigation button)
I WANT:
+++++++++
+++++++++
+++
I achieve this with css (disabling white-space: nowrap;
in div.fotorama__nav fotorama__nav--thumbs fotorama__shadows--right
), the problem is that many of the images doesn't show by default, How can I achieve that?
I get this more or less ("+" are images, "o" are unload images)
+++++++++
+oooooooo
ooo
Is there any way to achieve my porpouse with fotorama? Thank tou so much
You have to use the Fotorama API, events and methods (still not documented):
<div class="thumbs">
<a href="1.jpg"><img src="1-thumb.jpg"></a>
<a href="2.jpg"><img src="2-thumb.jpg"></a>
</div>
<script>
$('.thumbs').each(function () {
$('a', this).each(function () {
var $a = $(this);
// set ids, will use them later
$a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
});
var $thumbs = $(this),
$fotorama = $thumbs.clone();
$fotorama
.on('fotorama:show', function (e, fotorama) {
// pick the active thumb by id
$('#' + fotorama.activeFrame.id)
.addClass('active')
.siblings()
.removeClass('active');
})
.addClass('fotorama')
.removeClass('thumbs')
.insertBefore(this)
.fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});
// get access to the API
var fotorama = $fotorama.data('fotorama');
$thumbs.on('click', 'a', function (e) {
e.preventDefault();
// show frame by id
fotorama.show(this.id);
});
});
</script>
Fiddle: http://jsfiddle.net/artpolikarpov/tnWLv/embedded/result,html,css,js/