0

jQuery Isotope プラグインを使用しています。クリック可能な (最大化/最小化) Isotope 要素ごとに、次のように生成された jQuery Cycle スライドショーが 1 つあります。

$('.slideshow.mainview').each(function () {

    var $pager = $('<div class="pager"></div>').insertAfter(this); // creates a pager for each slideshow

    $(this).cycle({
        speed: 300,
        timeout: 0,
        pager: $pager,
        pagerEvent: 'click',
        allowPagerClickBubble: false
    });

});

ページャー リンクをクリックすると、Isotope 要素が閉じられるため、次のスライドが表示されません:( ページャー クリックの親 (Isotope 要素) への伝播を停止するにはどうすればよいですか? アドバイスをいただければ幸いです。

ps: pagerEvent として「mouseover」を使用すると、機能します。しかし、スライドは 2 回ちらつきます。ですから、それも簡単な方法ではありません。そして - マウスオーバーはスクリーンフォンやタブレットデバイスでは機能しません...

4

1 に答える 1

0

ああ、簡単。アイソトープ要素（.item）をクリックイベントに登録する必要はありませんが、クリックイベントを受信するために、その中の他の要素（ボタン、divなど）を登録する必要があります（自動クローズが追加されていない場合）。 、 以下のように）。次に、各Isotope .item内の他のすべての要素（スライドショーページャーなど）は、クリックするように登録できます。これは、それらのイベントが.itemにバブルアップして、時期尚早に閉じることがなくなるためです:)

$(document).ready(function () {

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

$container.isotope({
    itemSelector: '.item',
    masonry: {
        columnWidth: 256
    }
});

$items = $('.item'); // to be able to reference methods on every .item

$('.header').click(function () { // do not register the .item as usual, but any other element within it

    var $previousSelected = $('.selected'); // necessary for switching

    if ($(this).parent().hasClass('selected')) { // now, we have to use $(this).parent() because .header is inside .item

    $items.find('.minimised, .header').removeClass('transparent'); // makes all divs .minimised opaque after an .item is closed again

        $(this).parent().removeClass('selected');
        $(this).parent().children('.maximised').hide();
        $(this).parent().children('.minimised').show();

    } else {

    $items.not(this).parent().find('.minimised, .header').addClass('transparent'); // makes all divs .minimised transparent while (this) is opened

        $previousSelected.removeClass('selected');
        $previousSelected.children('.minimised').show();
        $previousSelected.children('.maximised').hide();

        $(this).parent().addClass('selected');
        $(this).parent().children('.minimised').hide();
        $(this).parent().children('.maximised').show();

    }

    $container.isotope('reLayout');
});

});
于 2012-07-23T17:24:15.490 に答える