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!
Did anyone know if there is some way to adjust the number of thumbnails (thumbnail count) for the fotorama image gallery in Magento 2?