幻灯片固定到浏览器窗口宽度和固定纵横比隐藏下面的内容答案

【问题标题】：Slideshow fixed to browser window width and fixed aspect ratio hide content beneath幻灯片固定到浏览器窗口宽度和固定纵横比隐藏下面的内容
【发布时间】：2012-09-26 21:34:40
【问题描述】：

我准备了一个幻灯片，其中包含非常大的图像和 prev/next 命令。幻灯片始终适合浏览器窗口（可调整大小），并且当图像调整大小时，它们会保持纵横比。

对于幻灯片，我使用了 jQuery Cycle 插件。幻灯片运行良好，但我对必须始终位于幻灯片下方但隐藏在幻灯片容器下方的内容存在问题（在使用循环插件之前，我有一个工作幻灯片，我只是用简单的JS在scontainer中加载下一张图片。但是没有淡入淡出效果，swap真的很丑）。

我认为问题在于没有为幻灯片声明高度。但如果我想调整幻灯片大小，我不能声明高度。

带有工作幻灯片但内容容器位置错误的现场示例：HERE。

具有正确容器位置且没有幻灯片的实时示例：HERE

我很迷茫，任何帮助都会很棒。

我使用的代码：

$(function() {
// retrieve list of slides from server
$.getJSON('slidelist.php', startSlideshow);

function startSlideshow(slides) {
    /* server returns an array of slides which looks like this:
    [
        'foto/02.jpg',
        'foto/03.jpg',
        'foto/04.jpg',
        'foto/05.jpg',
        'foto/06.jpg',
        'foto/07.jpg',
    ]
    */

    var totalSlideCount = 1 + slides.length;

    var $slideshow = $('#slideshow');

    // markup contains only a single slide; before starting the slideshow we 
    // append one slide and prepend one slide (to account for prev/next behavior)
    $slideshow.prepend('<img class="imgFotoPasica" src="'+slides.pop()+'" />');
    $slideshow.append('<img class="imgFotoPasica" src="'+slides.shift()+'" />');

    // start slideshow
    $('#slideshow').cycle({
        fx: 'fade',
        startingSlide: 1,  // start on the slide that was in the markup
        timeout:  0,
        speed:    800,
        prev:    '#prev',
        next:    '#next',
        before:   onBefore,
        containerResize: 0,  // resize container to fit largest slide - dodal zato, da se slika veča/manjša proporcionalno
        slideResize: 0,  // force slide width/height to fixed size before every transition - dodal zato, da se slika veča/manjša proporcionalno
        fit: 0,  // force slides to fit container - 0 izklopljeno 1 vklopljeno
    });

    function onBefore(curr, next, opts, fwd) {
        // on Before arguments:
        //  curr == DOM element for the slide that is currently being displayed
        //  next == DOM element for the slide that is about to be displayed
        //  opts == slideshow options
        //  fwd  == true if cycling forward, false if cycling backward

        // on the first pass, addSlide is undefined (plugin hasn't yet created the fn yet)
        if (!opts.addSlide)
            return;

        // have we added all our slides?
        if (opts.slideCount == totalSlideCount)
            return;

        // shift or pop from our slide array 
        var nextSlideSrc = fwd ? slides.shift() : slides.pop();

        // add our next slide
        opts.addSlide('<img class="imgFotoPasica" src="'+nextSlideSrc+'" />', fwd == false);
    };
}; 
});

<!doctype html>
<html lang="hr">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/css.css"/>
</head>

<body>
    <div id="ovoj">
        <div id="glava"><h1>HEAD</h1></div>
        <div id="ovojSlideshow">
            <div>
                <a href="#"><span id="prev">Prev</span></a>
                <a href="#"><span id="next">Next</span></a>
            </div>
            <div id="slideshow">
                <img class="imgFotoPasica" src="foto/01.jpg" />
            </div>
        </div>
        <div id="vsebina"><h1>ALL CONTENT, HAVE TO BE ALWAYS UNDER THE SLIDESHOW</h1></div>
    </div>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/SlideShow_01.js"></script>
</body>
</html>

【问题讨论】：

标签： jquery jquery-plugins slideshow jquery-cycle aspect-ratio

【解决方案1】：

在 ops.addslide 之后试试这个：
$('#ovojSlideshow').height($(curr).height());

要捕获窗口事件的大小调整：

$(window).resize(function() {
 $('#ovojSlideshow').height($(curr).height());
 // or you can change the width/etc
});

JS 小提琴示例：http://jsfiddle.net/lucuma/CqJDy/

您会注意到我正在使用窗口调整大小事件来设置幻灯片的高度。我以您的项目为例并删除了不必要的组件来演示它。

【讨论】：

您好，感谢您的帮助。我已经插入了你的代码。但是您的解决方案只有在我单击上一个/下一个后才有效。调整大小问题仍然存在。如果我在不刷新的情况下调整窗口大小，则幻灯片不会调整大小，请查看：piana.si/test/ 幻灯片下的部分 div 隐藏在下方。
如果我在之前的帖子中不清楚，我已经在我的问题 (piana.si/test) 中发布的示例中插入了您的解决方案。当然，如果有另一种方法来实现所需的行为并且实现起来不太重（我不太擅长 JS/jQuery 和类似的编程）对我来说是可以的。
@MyotisSI 您可以使用窗口调整大小事件来调整区域大小。我已经更新了答案以反映这一点。
我插入了您的代码，但它在第一页加载时不起作用，但只有在我手动调整窗口大小时才起作用。带有内容的 Div 仍然部分隐藏在幻灯片下方。示例：piana.si/test/index.php，JAVASCRIPT：piana.si/test/js/SlideShow_01.js
我什至尝试了另一种方法，但效果不佳。加载图像滞后，在第一页加载时淡化第一张图像等（看：piana.si/test/index02.php，js：piana.si/test/js/SlideShow_02.js）