fotorama with change of image on hover in thumbnails

Question

I use jquery gallery fotorama (http://fotorama.io) for my website, I try to implement a change of image with mouse hover on the thumbnails, like this http://www.homeaway.co.uk/p3530150#photos gallery.

I read the API documentation and search for any solution but I dont have idea.

thanks for your help

JH

Answer 1

Try this:

$(document).on('mouseover', '.fotorama__nav__frame', function () {
  var $fotoramaDiv = $(this).parents('.fotorama'),
      fotoramaApi = $fotoramaDiv.data('fotorama');
  fotoramaApi.show({
    index: $('.fotorama__nav__frame', $fotoramaDiv).index(this)
  });
});

Fiddle