1

这是我关于 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();
});
4

0 回答 0