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();
});

Fotorama：具有html内容的幻灯片的高度

0 个答案: