Isotope layoutComplete close item

by vanduzled

HTML

<script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
<div class="isotope">
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
    <div class="item">
        <div class="close">x</div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
/* ---- isotope ---- */
 .isotope {
    background: #DDD;
    max-width: 1200px;
}
/* clear fix */
 .isotope:after {
    content:'';
    display: block;
    clear: both;
}
/* ---- .item ---- */
 .item {
    float: left;
    width: 100px;
    height: 100px;
    background: #0D8;
    border: 2px solid #333;
    border-color: hsla(0, 0%, 0%, 0.7);
    margin-bottom: 10px;
}
.item:hover {
    background: #8CF;
    cursor: pointer;
}
.item.gigante {
    width: 200px;
    height: 300px;
    background: #F80;
}
#notification {
    position: fixed;
    background: black;
    opacity: 0;
    color: white;
    font-size: 16px;
    padding: 0.5em;
    right: 0;
    top: 0;
}
.gigante .close {
    background: none repeat scroll 0 0 red;
    display: block;
    float: right;
    height: 27px;
    padding: 2px 6px;
    width: 20px;
}
.close {
    display: none;
}

JavaScript

$(function () {

        var $container = $('.isotope').isotope({
            itemSelector: '.item',
            masonry: {
                columnWidth: 100,
                gutter: 10
            }
        });

        $container.isotope('on', 'layoutComplete', function (isoInstance, laidOutItems) {
            notify('Isotope layout completed with ' + laidOutItems.length + ' items');
        });
      $container.on( 'click', '.item', function() {
        // change size of item by toggling gigante class
        $('.item').removeClass('gigante');
        $('.close').removeClass('gigante');
        $( this ).toggleClass('gigante');
        $container.isotope('layout');

        $container.on('click', '.close', function () {
                $('.item').removeClass('gigante');
                $container.isotope('layout');
                return false;
            });
      });


    });