3

私はjQueryを初めて使用しますが、物事がどのように機能するかの基本的なアイデアは理解しています。現在、Isotope (流動的/レスポンシブ レイアウト) を使用してシンプルなページを開発しており、 Fancyboxをそのコンテンツにうまく統合することができました。しかし、問題は、Isotope のボックスの 1 つで画像リンクをクリックしようとするたびに、クリックするたびにボックスが拡大すると仮定すると、ボックスが元のサイズに戻り、画像が上に重ねられることです。全部。

説明の仕方がよくわかりませんが、jsfiddle で作成したウェブサイトのサンプルは次のとおりです。

1) どういうわけか、ボックスを希望どおりに動作させることができたので、ボックスの選択は問題になりません。しかし、ボックスを元のサイズと位置に戻さずに、展開されたボックスのテキスト/ビデオ リンクをクリックするにはどうすればよいでしょうか。別の新しいボックスをクリックしたときにのみ閉じるようにします。

2) また、可能であれば、クリックするたびに選択したボックスまでウィンドウをスクロールできますか?

誰にとっても混乱しないことを願っています。よろしくお願いします！:)

4

2 に答える 2

1

私はここで新しいので、完全な応答が不足していることをお詫びします。目的の効果を得るには、展開されたボックスからクリック関数のバインドを解除し、別の要素を選択する必要があります (おそらく、展開時にそれをロード/表示しますか?展開された要素内に要素を配置することをお勧めします)。展開されたボックスにバインドされました。そうすれば、ボックスは通常のテキスト/ビデオ/写真で機能し、エキスパンドを削除することもできます.

于 2012-02-10T21:56:49.547 に答える
1

それでも単純な変数ソリューションを探している場合は、次のようにすることができます

$(function () {

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

    $container.delay(2500).show().css({
        opacity: 0
    }).animate({
        opacity: 1
    }, 2500).isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 288
        },
        getSortData: {
            selected: function ($item) {
                return ($item.hasClass('clicked') ? -1000 : 0) + $item.index();
            }
        },
        sortBy: 'selected'

    });

    $('.maximised, .medium').hide();

    $('.display1, .display2').click(function () {
        var $this = $(this);
        bSelector = $this.hasClass('display1') ? '.maximised' : '.medium';

        var $previousSelected = $('.clicked');
        if (!$this.hasClass('clicked')) {
            $this.addClass('clicked');
            $previousSelected.find('.minimised').toggle();
            $previousSelected.find('.maximised').toggle();
            $previousSelected.find('.medium').toggle();
        }

        $previousSelected.removeClass('clicked');

        $this.find('.minimised').toggle();
        $this.find(bSelector).toggle();

        $container.isotope('updateSortData', $this).isotope('updateSortData', $previousSelected).isotope();
    });

});

実際の例はまだここにあります。一部の要素には、最初のクリックで最大化されるリンクとモーダルがあります。

于 2012-07-11T09:10:05.257 に答える