1

Following the advice of several S.O. members, I have decided to try to use Jquery Isotope on a webpage. I am also using Bootstrap 3, and have been having trouble getting a thumbnail gallery (with different-sized landscape/portrait orientation images) looking nice.

I am using the Bootstrap 3 .thumbnail class to resize the images to fit within the responsive columns. Everything works great until I apply Isotope to these thumbnail divs. I really don't know what is going on, but I have spent several days going over everything (don't laugh) and can't figure it out, am losing my mind, etc. I'm hoping it's something pretty simple that I'm missing because I have seen examples on bootply.com that seem to work (not sure if I've seen any with Bootstrap 3, though.)

This is what's happening:

Isotope cropping the divs

Here is a link to the page I have been testing: http://www.chrissvensson.info/projects/025

This is the main part of the code I'm using.

<div class="container iso">
<div class="row">
  <div class="item col-xs-12 col-sm-4 col-md-3">
    <a class="thumbnail fancybox" href="<?php echo dirname($image->url()); ?>/detail/<?php echo $image->name() ?>-detail.jpg" rel="group"><img src="<?php echo $image->url() ?>" width="<?php echo $image->width(); ?>" height="<?php echo $image->height(); ?>"></a>
</div><!--thumbnail div-->
    <?php endforeach ?>
<?php endif ?>
</div><!--row-->

Here's the Isotope script:

$('.iso').isotope({
// options
itemSelector: '.item',
layoutMode: 'masonry'
});

I have been testing things in this jsfiddle: http://jsfiddle.net/52VtD/345/

That is linked to the Bootstrap 3 css and has my customized CSS in there as well. For some reason, it seems to be working okay in the fiddle (except for the fact that it's cutting the bottom images off), but it looks totally different on my site. As you will see, it's like it doesn't calculate the vertical height of the divs, and just crops them and piles them on top of each other.

A few more points:

  • I'm pretty sure it has to do with something in Bootstrap 3's .thumbnail class. When I remove that class from the link, things seem to work okay (except the images don't scale to the columns, which I want)
  • Here is the crazy part: a few times I have clicked onto another tab, or come back to my website after visiting another window AND EVERYTHING SEEMS TO BE WORKING. I swear I've witnessed this, but I could be hallucinating. Not sure if this means that it's working very, very, very slowly or something, though?

If you can offer any advice I would be very, very grateful! Thank you so much in advance.

ornmnt
  • 355
  • 2
  • 6
  • 17
  • Probably because the images aren't loaded when you called `isotope()`, and therefore the engine doesn't know how much height to allow for each item. Try calling it after the page has finished loading, or putting `width` and `height` attributes in your image tags. – ahren Oct 24 '13 at 06:27
  • Although, now I see that you do have width/height attributes. Are you sure these are being outputted properly? – ahren Oct 24 '13 at 06:28
  • Thanks for your comment, @ahren. I am pretty sure the width/height attributes are outputting properly, but then again, I think Bootstrap's .thumbnail class resizes them to fit within the columns. Not sure if that would affect Isotope. – ornmnt Oct 24 '13 at 06:31
  • @ahren I have the Isotope code at the very end, just before the

    tag. Is that what you mean by calling it after the page has finished loading? I should also mention that I link to the script itself in the

    . Is that okay? As in:

    – ornmnt Oct 24 '13 at 06:33
  • Yeah sorry, I don't know much about Bootstrap. It looks as though (from your screenshot) that the images aren't being stretched or compressed, so I would assume it's their containing element that has a height and probably `overflow:hidden` – ahren Oct 24 '13 at 06:33
  • If you open up your javascript console on that page, and manually input `$('.iso').isotope({itemSelector:'.item'});`, you'll see that it works. – ahren Oct 24 '13 at 06:36
  • Please see this : http://pknopf.com/blog/jquery-isotope-with-responsive-twitter-bootstrap – Ishan Jain Oct 24 '13 at 06:46
  • Thank you all for your help and suggestions. @ahren I think you were right about the images not being loaded. I tried to figure out Isotopes Imagesloaded plugin but it was over my head. I did manage to find another thread that was helpful: http://stackoverflow.com/questions/14158989/jquery-isotope-on-first-load-doesnt-work-how-do-i-wait-for-all-resources-image I added some of that $(window).load code and it seemed to help. I'm going to keep my fingers crossed, but now at least, the Masonry effect seems to be working. Now I just have to figure out some Bootstrap-related padding issues… – ornmnt Oct 26 '13 at 19:34
  • Here is my modified Isotope code: // jQuery - Wait until images (and other resources) are loaded $(window).load(function(){ // All images, css style sheets and external resources are loaded $('.iso').isotope({ // options itemSelector : '.item', layoutMode : 'masonry' }) }); – ornmnt Oct 26 '13 at 19:35

3 Answers3

8

You need to add the imagesLoaded event listener.

$('.container').imagesLoaded(function(){
    $('.container').isotope({...});
});
Jesse
  • 307
  • 2
  • 5
2

Note:
1.you should call iso-top function inside windwo load event (it will wait for resources to be loaded) also you can call function in footer.

2.confirm that function call after css load.

$(window).load(function(){
     $('.iso').isotope({
     // options
     itemSelector: '.item',
     layoutMode: 'masonry'
    });
   });
Milan Pandya
  • 71
  • 1
  • 1
0

the imagesLoaded plugin should totally work (even though it has been removed from Isotope v2), I personally have solved it like this:

var myGrid = $('.grid');

myGrid.imagesLoaded(function(){
    myGrid.isotope();
});

But I also loved how this plugin solved the issue internally: http://goo.gl/sQ6yXj and it is using Isotope v2 which is very awesome

silk
  • 1
  • 1