0

ギャラリーを作成しようとしていますが、jQuery をまったく使用していないため、一種のデッドロックに陥っています。

クリックすると全幅に拡大し、別の写真では元の写真に戻るいくつかの小さな写真で構成されるギャラリーを作成したいと考えています。同時に、クリックした画像が展開されている間、親ラップの残りのすべての div を非表示にします。すべてがスムーズかつきれいに実行されている必要があります。それは私が到達できないものです。すべての写真には .image クラスがあり、それぞれに .one .two などのクラスがあります。それらはすべて親ラップの下にあります。

$(".image").bind('click', function() {
     $(this).animate({width: "100%", height: "100%"}, 800);
$(".image").not(this).hide("slow");
});

$('.image').toggle(function(){
    $(this).animate({width: "100%", height: "100%"}, 800);    
}, function(){
    $(this).animate({width: "90px", height: "90px"}, 800);
    $(".image").not(this).show("slow");
});

今までの私の努力の結果http://jsfiddle.net/baltar/TRuNv/4/

滑らかさの良い例http://css-tricks.com/examples/InfoGrid/

また、その場で親 div の高さを調整するように設定すると、どんな比率の画像も収まります。親の高さを自動に設定しようとしましたが、うまくいきませんでした。

私の質問は大きすぎて尋ねることができないことは承知していますが、少なくとも誰かが私がどの方向に目を向けるべきかアドバイスできるかもしれません.

前もって感謝します！

4

1 に答える 1

1

次の jQuery は、要求したことのほとんどを実行します。

$(".image").bind('click', function() {
    var that = $(this), // caching the current element
        offsets = that.position(), // edited to use position() instead of offset()
        top = offsets.top,
        left = offsets.left,
        clone = that.clone(),
        parent = that.parent(), // caching the parent element
        width = parent.width(),
        height = parent.height();

    // adding the 'clone' element to the parent, and adding the 'clone' class-name    
    clone.addClass('clone').appendTo(parent).css({
        // positioning the element at the same coordinates
        // as the current $(this) element
        'top': top,
        'left': left
    }).animate({
        // animating to the top-left corner of the parent, and
        // to the parent's dimensions
        'top': 0,
        'left': 0,
        'width': width,
        'height': height
    }, 1000).click( // binding a click-handler to remove the element

    function() {
        // also fading the sibling elements back to full opacity
        $(this).fadeOut().siblings().animate({
            'opacity': 1
        }, 1000);
    }).siblings().animate({
        // fading-out the sibling elements
        'opacity': 0.1
    }, 1000);

});​

これには CSS が必要です。

.wrap {
    /* your other unchanged CSS, and: */
    position: relative;
}
.clone {
    position: absolute;
}

JS フィドルのデモ。

参考文献:

于 2012-11-24T00:12:07.617 に答える