Insert elements in the middle of a grid using jquery masonry

Question

I am working on updating my gallery website, which uses masonry to lay out all the images. I want the contact panel to open in the middle of the brickwork when I click on the contact link.

Is there a way to insert new bricks after the third DIV instead of just adding or adding them?

Is this possible with just masonry, or is it something that requires me to switch to the isotope?

I tried using .after instead of .prepend, but this does not seem to be a workable option:

http://lilyinblue.com/gridtest.html

Answer 1

You can paste the contents and then “reload” the masonry. Below is the basic version of what you can do. You will replace the bit that you have, where you connect the contact button with this. You may want to set the flag when adding contact information so that it is not added several times, or give a way to delete contact information (for example, the close button) - it all depends on you.

$(document).ready(function(){ $('#contactlink').click(function(){ var $container = $('#container'); var contactDiv = $('<div class="element">To contact me please call 555-8723</div>'); contactDiv.insertAfter($container.find('.element').eq(3)); $container.masonry('reload'); }); });