jQuery cycle with pager inside div with click events - can't stop propagation

Question

I\'m using the jQuery Isotope plugin. In each clickable (maximising/minimising) Isotope element, I\'m having one jQuery Cycle slideshow generated like

$(\'.slide         


        

Answer 1

Ah, easy. One has to NOT register the Isotope element (.item) with a click event - but just any other element INSIDE of it - a button, a div, whatever - in order to receive the closing click event (if no auto-close is added, as below). Then, all other elements within each Isotope .item - slideshow pagers, whatever - can be registered to be clicked, because their events will no longer bubble up to the .item and close it prematurely :)

$(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');
});

});