CODEWITHSUNDEEP
javascripthtmljquery-masonry
Dex Dave
Dex Dave

Reputation: 730

Masonry hiding image

I am trying to hide images on a grid I made using masonry. I dont know what wrong..help appreciated The grid loads the images all fine, but when I click the button the alert shows up and nothing else

also how do I get masonry to fill the space of the hidden object, and can I get attridutes from the items ? 

<script>
    //initialise masonry grid
    var container = document.querySelector('#container');
    var button = document.querySelector('#button001');
    var msnry = new Masonry( container, {
        // options
        columnWidth: '.item',
        itemSelector: '.item',
    });
    //hide function
    eventie.bind( button, 'click', function() {
        //declare the variables
        var elems = msnry.getItemElements();
        var element = elems[1];
        var item = msnry.getItem( element );
        //hide the item
        msnry.hide(item);
        //reload masonry
        msnry.reloadItems();
        //show success
        alert("Success !!!");
    });
</script>

thanks in advance

Upvotes: 0

Views: 329

Answers (2)

Dex Dave
Dex Dave

Reputation: 730

figured it out eventualy, had to actualy delete the item instead of hiding it 

msnry.remove(element);
msnry.layout();

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

According to the docs for the .hide method, it accepts an array of items to hide.

Try with msnry.hide([item]); ?

Upvotes: 1

Related Questions