artpolikarpov / fotorama

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

Adapted height of the images #555

Open rainerhillebrand opened 5 years ago

rainerhillebrand commented 5 years ago

Dear Artem, Thanks a lot for providing your jQuery plugin for free. I want to use Fotorama for publishing panorama photos that have very different aspect ratios. Therefore, I had added the following code to automatically resize each active frame.

$(function () {
  $('.fotorama')
      // Listen to the events
      .on('fotorama:load ' +   // Stage image of some frame is loaded
          'fotorama:showend',  // End of the show transition
          function (e, fotorama, extra) {
              getImageSize($('.fotorama__active .fotorama__img'), function(width, height) {
                  console.log('## ' + e.type);
                  console.log('active frame', fotorama.activeFrame);
                  console.log('Image width:  ' + width);
                  console.log('Image height: ' + height);
                  const aspectRatio = width / height;
                  console.log('Aspect ratio: ' + aspectRatio);
                  fotorama.resize({
                      width: "100%",
                      ratio: aspectRatio,
                      minwidth: 50,
                      maxwidth: "100%",
                      minheight: 50,
                      maxheight: "100%",
                  })
              console.log('Image resized.');
              });
              function getImageSize(img, callback) {
                  var $img = $(img);
                  if ($img[0] != undefined) {
                      var wait = setInterval(function() {
                          var w = $img[0].naturalWidth,
                              h = $img[0].naturalHeight;
                          if (w && h) {
                              clearInterval(wait);
                              callback.apply(this, [w, h]);
                          }
                      }, 30);
                  }
              }
          }
      )
});

Fotorama perfectly adapts the images' width to a changing viewport width. However, an image's height is not adapted as well when the height viewport shrinks. Does Fotorama support a perfect height adaption as well?

Best regards,

Rainer