jquery-masonry

I've been using JQuery masonry and now I'm adding infinite scroll. There are images in nearly every masonry "brick" and before I was using infinite scroll the images loaded fine and everything was great. I added the next part of the javascript for the infinite scroll and added the imagesLoaded method inside but when the new bricks are appended they come out all piled on top. My assumption is that I am not adding the imagesLoaded method properly in the infinite scroll callback but I haven't been able to find my error. Here's the code <script type="text/javascript"> $(function(){ var $container

I am working on a project that uses the jQuery Masonry and Infinite Scroll plugins to load "n" amount of pictures from instagram using their API. Looking at this short example my understanding is that I need to have before hand the html pages to be rendered: <nav id="page-nav"> <a href="pages/2.html"></a> </nav> The problem is, I dont really know how many pictures will be retrieved. Here is for example how I retrieve 20 pics at a time. $(document).ready(function(){ var access_token = location.hash.split('=')[1]; if (location.hash) { $.ajax({ type: "GET", dataType: "jsonp", cache: false, url:

I have a very strange problem in here: [Referral Link Removed] . The first row product items overlapped with the items in the second row. The masonry items are below the homepage above the footer. As you can see, it looks different with Chrome. In firefox, it looks good. Here's how it looks in my chrome: http://clip2net.com/s/5LIRko My jQuery Code is: jQuery(function($){ var $container = $('.woocommerce ul.products'); $container.masonry({ columnWidth:10, gutterWidth: 15, itemSelector: '.product-category' }); }); Is there any css rule which affects the row output ? Eli Gassert The problem is

Can anyone suggest how this site uses the jQuery Masonry plugin for its responsive, fluid layout? http://tympanus.net/codrops/collective/collective-2/ Specifically; The number of columns changes from 3 to 2 to 1 on browser resize which is what you expect from a site using masonry, but what's interesting is the columns also resize to always fill the full width available. Most other Masonry sites I've seen leave gaps to the right of the columns as the number of columns changes (e.g http://masonry.desandro.com/ ) OR the columns fill the full width but the number fo columns stays the same ( http:/

I have a series of clickable boxes. I need to be able to expand the boxes and hide its img. I also need to be able to close previous opened one taking it back to its original height and defined width while fading back in its img. .info loads ajax content <div class="box"> <img src="#" /> <div class="info"></div> </div> <div class="box"> <img src="#" /> <div class="info">Ajax load content</div> </div> <div class="box"> <img src="#" /> <div class="info">Ajax loads content</div> </div> The css, i don't know the height. .box { width: 230px; height: auto; } .info { height: auto; width: auto; } I

I am building a tumblr theme from scratch and I'm using masonry . Although, sometimes it overlaps pictures, it doesn't add any gutter, calculates top wrong, and I'm not sure of what's happening. I tried adding imagesloaded library but I don't think it's woking since it's still overlapping pictures, etc, sometimes. Images width and height are defined on the CSS since they're all the same width but different heights. HTML <div class="masonry js-masonry" data-masonry-options='{ "isFitWidth": true, "gutter": 14}' id="content"> {block:Posts} <div class="container" id="{postID}"> {block:Photo} <div

Good evening, I'm having an issue with Masonry. This is all my relevant code: var $test; var $iterator = 0; $(document).ready(function() { $("#demo-input").tokenInput("php-example.php" ,{ classes: { tokenList: "token-input-list-facebook", token: "token-input-token-facebook", tokenDelete: "token-input-delete-token-facebook", selectedToken: "token-input-selected-token-facebook", highlightedToken: "token-input-highlighted-token-facebook", dropdown: "token-input-dropdown-facebook", dropdownItem: "token-input-dropdown-item-facebook", dropdownItem2: "token-input-dropdown-item2-facebook",