Search code examples
fotorama

Link to specific image on fotorama

I have some fotorama pictures and I want to get a link to an specific one. For example I'd like to go to the third image of the carousel with a link and not only to the first one. I guess I should use the .activeIndex but I don't know how to do it.

Thanks in advance!

Solution

  • This is covered in the fotorama documentation.

    Just add the attribute data-hash="true" to the enclosing fotorama div element:

    <div class="fotorama" data-hash="true">
  <img src="1.jpg" id="photo_1">
  <img src="2.jpg" id="photo_2">
  <img src="3.jpg" id="photo_3">
  ... etc ...
</div>

    and then link to them using the id attribute as a URL fragment identifier, e.g.:

    http://example.com/my_gallery.html#photo_1
http://example.com/my_gallery.html#photo_2
http://example.com/my_gallery.html#photo_3

    There are some examples you can play with here: http://fotorama.io/customize/hash/