Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Adapted height of the images #555

Open
rainerhillebrand opened this issue Sep 15, 2019 · 0 comments
Open

Adapted height of the images #555

rainerhillebrand opened this issue Sep 15, 2019 · 0 comments

Comments

@rainerhillebrand
Copy link

rainerhillebrand commented Sep 15, 2019

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

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant