more granular events possible? about fotorama HOT 4 CLOSED

To get access to the attached images, use this snippet:

$('.fotorama').on('fotorama:load', function (e, fotorama, data) {
  var $img = $('.fotorama__img', data.frame.$stageFrame);
});

from fotorama.

Thanks for that hint Artem.

That certainly helps when the image is loaded the first time, but the load event does not fire when I’m scrolling around the images and an image is redisplayed later on because it is already loaded then.

I thought the show event should do the trick but I find it hard to figure out the correct new image there (probably because it takes a moment for the animation to finish.

from fotorama.

Do you really need to get the image twice and more? I was thinking that it is enough to touch it once.

If so, try to combine the fotorama:showend event and the private f:load:

function catchImage ($frame) {
  var $img = $('.fotorama__img', $frame);
  // do something smart with $img
}

$('.fotorama')
    .on('fotorama:showend', function (e, fotorama) {
      var $frame = fotorama.activeFrame.$stageFrame;

      if (!$frame.data('state')) {
        $frame.on('f:load', function () {
          catchImage($frame);
        });
      } else {
        catchImage($frame);
      }
    })
    .fotorama();

Also you have to add data-auto="false" attribute to the fotorama block, to skip automatic initialization.

from fotorama.

Do you really need to get the image twice and more? I was thinking that it is enough to touch it once.

I do: there is only one image zoomer which is just transferred to the current image. So I need to know when that happens.

If so, try to combine the fotorama:showend event and the private f:load:

Indeed that does the trick!

Thanks again

from fotorama.