fotorama - Fotorama: HTML コンテンツを含むスライドの高さ

Question

これは Stackoverflow に関する私の最初の質問です。意味があることを願っています :)

各スライドに HTML コンテンツ (テキスト、画像、外部リンク、ソーシャル ネットワーク ボタンなど) と全画面表示オプションを含むスワイプ可能な画像ギャラリーを作成する必要があります。Fotorama は私が見つけた最高のソリューションです。私はそれの大ファンです :)

ただし、最初の画像の高さにトリミングされるため、html コンテンツをギャラリーに収めるのが難しいと感じています。

背景画像ではなく、画像がhtmlにある必要があります。また、通常モードと全画面モードの両方ですべてのコンテンツを表示する必要があります。テキストの長さと画像のサイズは異なる場合があるため、ギャラリーの高さを固定することはできません。

それは理にかなっていますか？似たような質問がなかったので、ご存知の方がいらっしゃいましたら教えてください！ありがとう ：）

これは私がこれまでに行ったことの簡略化されたコードです。コメントは大歓迎です!

<div class="fotorama" data-allowfullscreen="true" data-nav="thumbs" data-click="false"  data-width="100%">
<div data-thumb="image-01.jpg" id="slide1">
    <h2>Title 01</h2>
    <img src="image-01.jpg" width="100%">
    <div class="content">                        
        <p>Blah blah blah</p>
        <div class="photoShare">
            <h6>Share</h6>
            <!-- Social Network Buttons -->
        </div>
        <div class="buyThisPhoto">
            <!-- Buy this photo link -->
        </div>
    </div>
</div>
<!-- etc -->

更新: API を使用して、可能性のあるソリューションに取り組んでいます。うまくいくようですが、改善のための提案は大歓迎です:)

$(function () {    
var $fotoramaDiv = $('#fotorama').fotorama();    
var fotorama = $fotoramaDiv.data('fotorama');
$('.fotorama').on('fotorama:ready ' + 'fotorama:show ' + 'fotorama:load ', function () {             
        var currentContainer = $(".fotorama__active").children('div'); 
        var newHeight = /* calculate the height by adding up the heights of the elements contained in currentContainer */;       
        fotorama.resize({
            height: newHeight
        });
      }).fotorama();
});