1

非常に大きな画像とprev/nextコマンドを使用したスライドショーを用意しました。スライドショーは常にブラウザウィンドウに収まり(サイズ変更可能)、画像のサイズが変更されると、アスペクト比が維持されます。

スライドショーでは、jQueryCyclePluginを使用しました。スライドショーはうまく機能していますが、常にスライドショーの下にある必要があり、代わりにスライドショーコンテナのに隠れているコンテンツに問題があります(サイクルプラグインを使用する前にスライドショーが機能していましたが、単純なJSを使用して次の画像をコンテナにロードしますが、フェード効果はなく、スワップは本当に醜いものでした)。

問題は、スライドショーに高さが宣言されていないことだと思います。ただし、スライドショーのサイズを変更したい場合は、高さを宣言できません。

スライドショーは機能しているが、コンテンツコンテナの位置が間違っている実例:こちら

コンテナの位置が適切で、スライドショーがない実例:こちら

私はかなり迷っています、そしてどんな助けも素晴らしいでしょう。

私が使用したコード:

$(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>
4

1 に答える 1

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/

スライドショーの高さを設定するためにウィンドウサイズ変更イベントを使用していることに気付くでしょう。プロジェクトを例として使用し、それを示すために不要なコンポーネントを削除しました。

于 2012-09-21T17:14:45.090 に答える