Forum

I see this is a very young forum, I came here looking solutions about Fotorama, anyway I had more answers here in few days that on the big Stackoverflow!:) And I really appreciate the fact you made again in hurry the Lightbox for the new version. Only here I found it. In the official site I found only little pieces of code here and there.

I'm a graphic designer and not so fond of jquery (able to use only simple codes). I know everything about graphic and video programs, and I made a lot of sites using flash, but now ...

Well, for my wewsite I'd prefere to use personal thumbs (so I can work on them in a graphical way) instead of those of Fotorama. In this case I need something to link the personal thumb to the original picture and start Fotorama. I found this code on the Fotorama customize original page. But I was not able to make it working! I think I miss something.

Here's another possibility... set the attribute: data-nav="none", create your own thumbnails, and then bind the thumbnail clicks using jQuery to the .show() method.
Example:

Code: Select all

<div class="fotorama" data-nav="none">
<img src="full-apple.jpg">
<img src="full-orange.jpg">
</div>

<div class="my-thumbnails">
<img src="thumb-apple.jpg">
<img src="thumb-orange.jpg">
</div>

<script>
$('.fotorama').on('fotorama:ready', function (e, fotorama) {
//- Connect the thumbnails to the main image.
//- We need this because we use our own images,
//- not the ones generated by fotorama nav.
$('.my-thumbnails a').click(function(e) {
e.preventDefault();
var index = $(this).data('image-index');
fotorama.show(index);
});
});
</script>

If you are able to resolve this issue I have everything for my website!

By the way, your Lightboks works perfectly. The only problem is sometimes you have to click twice to close the Fotorama and come back to the thumbs page.

Thanks again for your help till now and for your patience.
I wanted to write to you a personal message, but I was not able to put the recipient's name.

Hi,
That code not works because you have the thumbs in <img> tag, but in jQuery you refer to "a" ( $('.my-thumbnails a') ).
Try change with: $('.my-thumbnails img')..., or add the thumbs address in <a> element.

Anyway, I not know to much about Fotorama API and its "data" attributes because i not use it.
But, from what I see in their examples, you can add the image address in <a> tag, and the thumbs in <img>.

Code: Select all

<div class="thumbs">
  <div class="fotorama" data-auto="false" data-thumb-width="70" data-thumb-height="47"  data-allow-full-screen="true" data-loop="true">
    <a href="img_1.jpg"><img src="img_1-thumb.jpg"></a>
    <a href="img_2.jpg"><img src="img_2-thumb.jpg"></a>
  </div>
</div>

- See the source code of the "lightbox-2.html" page in the "test/" folder (in the archive with Fotorama plugin from this website).

Fotorama lightbox and personal thumbs

Fotorama lightbox and personal thumbs