artpolikarpov / fotorama

A simple, stunning, powerful jQuery gallery.
http://fotorama.io
Other
1.58k stars 378 forks source link

more granular events possible? #26

Closed ssp closed 11 years ago

ssp commented 11 years ago

I am currently trying to set up fotorama together with an image zooming tool.

While doing that I am running into the issue that I could not find an event that tells me exactly when fotorama puts a new image in place.

I.e., I am looking for an event to learn about the new image put in place by fotorama and a way I can get hold of it to hook it up to the image zooming tool. I have tried the fotorama:show event but it seems to be fired too early when jQuery('.fotorama__stage__frame.fotorama__active img') still returns the old image.

It also seems that on initialisation the img may not be in place yet and I couldn’t figure out so far how to learn exactly when an image is displayed along with a way to get hold of it.

artpolikarpov commented 11 years ago

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);
});
ssp commented 11 years ago

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.

artpolikarpov commented 11 years ago

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.

ssp commented 11 years ago

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