3

過去数日間、自分の問題の解決策を見つけようとしましたが、実際にはどこにも見つかりませんでした。Google は文字通り私を嫌っているので、ここにいます。これは大きな要求であり、私の良心はそれを求めることで私を食い物にしていますが、他にどこに頼ればよいかわかりません。

私はフォトグラファー向けのギャラリーを作成しています。HTML と CSS には慣れていますが、jQuery のスキルは劣っています (要するに、上手ではありません)。驚き、驚きです。

これは 100% の高さのギャラリーであり、100% の高さはうまく機能しないため、タスクはさらに複雑になります。なんとかセットアップできましたが、その機能は実際には損なわれています。

ここで Stack と Google を掘り下げた後、William Moynihan によるこの素晴らしい Plugin/Fiddle を見つけました: http://jsfiddle.net/wdm954/8GKz6/11/

マークアップと CSSだけでなく、探していた機能も含まれています。スライド時にメイン画像を中央に配置し、無限に使用できるスライダーです。

ただし、画像のプロパティheight: 100%;のため、うまく機能しません。width: auto;次の行:

$(content).width(w * $(section).length);

CSS の auto プロパティのため、コンテナーの幅をまったく計算していないようです (ゼロに設定します)。jQuery .css プロパティを介して幅を に設定すると('width', 'auto')、正常に動作しますが、スライド機能が不完全で、左右に移動すると画像がスキップ/ジャンプします。

スライダーは使用しませんでした。これは、実際にコンテンツを水平方向にレイアウトするのに適した方法であり、写真家の Web サイトで見栄えがするからです。またwidth: 100%;、垂直方向の画像がブラウザー ウィンドウを超えて伸び、水平方向の画像が上部に「ハング」し、下に十分な余白ができます。width: auto;だから、私はそれが正しい、反応の良い方法であると確信してheight: 100%いますが、誰かが私を「納得させない」ことができれば、私は間違いなくあなたのリードに従います.

私がここにいる間、おそらく誰かが私を正しい方向に向けてこのギャラリーを有限にするのに十分礼儀正しいかもしれません-スライダーの開始と終了で終わり、それに応じて左/右のボタンが消えます.

どんな助けでも大歓迎です。フィドルでは不十分な場合に備えて、コード自体を次に示します。

<div class="container">
    <div class="gallery">
        <img src="../img/1.jpg" alt="Image" />
        <img src="../img/2.jpg" alt="Image" />
        <img src="../img/3.jpg" alt="Image" />
        <img src="../img/4.jpg" alt="Image" />
        <img src="../img/5.jpg" alt="Image" />
    </div>
</div>
<nav id="navigation">
    <a href="#" class="left">&#060;&#060;</a>
    <a href="#" class="right">&#062;&#062;</a>
</nav>

<script>
/*  jQuery Ghost Carousel
 *  Copyright (c) 2011 William Moynihan
 *  http://ghosttype.com
 *  Licensed under MIT
 *  http://www.opensource.org/licenses/mit-license.php
 *  May 31, 2011 -- v1.0
 */
$(function() {
    var content = '.container .gallery';
    var section = content + ' > img';

    function ghostCarousel() {

        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;

        $(content).width(w * $(section).length);
        $(content).css('margin-left', -c);
        $(content).css('width','auto');

        $('#navigation a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);
            });
        });
        $('#navigation a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);
            });
        });

    }

    ghostCarousel();

    $(window).resize(function() {
        var v = $(window).width();
        var w = $(section).width();
        var c = (w * $(section).length - v) / 2;
        $(content).css('margin-left', -c);
    });   
});
/* end "jQuery Ghost Carousel" */
</script>

CSSとともに：

html, body { padding: 0px; }

.container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;   
}
.container .gallery > img {
    position: relative;
    float: left;
    height: 100%;
}
4

1 に答える 1

1

有限にするためには、この 2 つの関数だけを理解し、変更する必要があります。

        $('#gcNav a.left').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '-=' +w }, 1000, function() {
                var first = $(section).eq(0);//this is first
                $(section).eq(0).remove();
                $(this).animate({ marginLeft: '+=' +w }, 0);
                $(this).append(first);//adding
            });
        });
        $('#gcNav a.right').click(function(e) {
            e.preventDefault();
            if ($(content).is(':animated')) return false;
            $(content).animate({ marginLeft: '+=' +w }, 1000, function() {
                var end = $(section).length - 1;
                var last = $(section).eq(end);//this is last
                $(section).eq(end).remove();
                $(this).animate({ marginLeft: '-=' +w }, 0);
                $(this).prepend(last);//adding
            });
        });

さて、このコードでは、.left と .right をクリックして動作しています。有限にしたい場合は、

スライドの長さを計算して、スライドの追加をやめて、コメントを追加しました..

道を示しただけなのに…

これが役立つことを願っています...

于 2013-05-28T12:45:15.390 に答える