Question

I’m still quite new to jQuery so bear with me…
I’m using the masonry plugin, here’s my code—

$(document).ready(function(){
      $(".pics-hidden").hide();

      $('.pics').click(function() {
            $('#div'+$(this).attr('rarget')).addClass('pics').removeClass('#div'+$(this).attr('rarget')).delay(600).fadeIn(400);
            $('#projectimages').masonry('reload');
      });

      $('.close').click(function() {
            $('#div'+$(this).attr('larget')).addClass('.pics-hidden').removeClass('#div'+$(this).attr('larget')).delay(600).fadeOut(400);
            $('#projectimages').masonry('reload');
            return false;
      });
});

Clicking on .pics will show a hidden div by changing the class and reload the masonry plugin, but when you try to close these divs using the close button (.close) the divs successfully close but the masonry doesn’t reload this time and leaves a blank space.

Here’s the template I’m working on — http://www.nealfletcher.co.uk/testingtesting
So I’m wondering if it’s possible to fire the .masonry(‘reload’) twice, or any other solution that would solve the problem?

Answer 1

I have not really looked into what masonry actually does,
but you may want to move $('#projectimages').masonry('reload');

before

return false;

in $('.close').click(function() {...}); as nothing is executed after the return statement.

EDIT : (removed ‘pics’ class on close)

$('.close').click(function() {
      $('#div'+$(this).attr('larget')).removeClass('pics').addClass('.pics-hidden').removeClass('#div'+$(this).attr('larget')).delay(600).fadeOut(400);
      $('#projectimages').masonry('reload'); 
      return false;      
});