Adjust fotorama stage height when frame changes

Today I faced a problem with a client where the fotorama stage height needed to be adjusted based on the image that was displaying.

After some digging I came up with a the following script to solve the problem:

<script>
	require(['jquery', 'mage/gallery/gallery'], function($, gallery){
        $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {
            $(this).on('fotorama:load', function(){
               var newHeight = jQuery('.fotorama__stage__frame.fotorama__active img').prop('naturalHeight') + 'px';
				jQuery('.fotorama__stage').css('max-height',newHeight);
            });
			$(this).on('fotorama:showend', function(){
               var newHeight = jQuery('.fotorama__stage__frame.fotorama__active img').prop('naturalHeight') + 'px';
				jQuery('.fotorama__stage').css('max-height',newHeight);
            });
        });
    });
</script>

This takes advantage of the load and showend event which, accordingly to the fotorama documentation, fires when the stage image of some frame is loaded and when the transition ends, respectively.

Then I grab the height of the active image (note that I’m grabbing the actual image height and not the display height of the image by fetching the naturalHeight property) and set the max-height of the fotorama stage to that value.

Done!