无法使同位素与Bootstrap 3 .thumbnail一起工作 [英] Can't get Isotope working with Bootstrap 3 .thumbnail

问题描述

按照几个S.O.的建议。成员，我决定尝试在网页上使用Jquery Isotope。我也使用Bootstrap 3，并且无法获取缩略图库（具有不同大小的横向/纵向方向图像）看起来不错。

我使用Bootstrap 3 .thumbnail类调整图像大小以适应响应列。一切工作伟大，直到我应用同位素到这些缩略图div。我真的不知道发生了什么，但我已经花了几天的时间去过一切（不要笑），不能弄清楚，失去我的思想，等等。我希望它的东西很简单我失踪，因为我看到的例子bootply.com似乎工作（不知道如果我看到任何与Bootstrap 3，虽然。）

这是发生了什么：

这是指向我测试的页面的链接： http://www.chrissvensson.info/projects/025

这是我使用的代码的主要部分。

 < div class =container iso> 
< div class =row> 
< div class =item col-xs-12 col-sm-4 col-md-3> 
< a class =thumbnail fancyboxhref =<？php echo dirname（$ image-> url（））;？> / detail /<？php echo $ image-& （）？> -detail.jpgrel =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  - > 
 

这里是Isotope脚本： / p>

  $（'。iso'）。isotope（{
 // options 
 itemSelector：'.item '，
 layoutMode：'masonry'
}）; 
  

我一直在测试这个jsfiddle中的东西： http://jsfiddle.net/52VtD/345/

这是链接到Bootstrap 3 css和我的自定义CSS在那里以及。出于某种原因，它似乎在小提琴工作正常（除了它的事实，它的底部图像关闭），但它看起来完全不同在我的网站。正如你将看到的，它就像它不计算div的垂直高度，只是作物，并将它们堆叠在彼此之上。

点：

• 我很确定它必须与Bootstrap 3的.thumbnail类中的东西有关。当我从链接中删除该类时，事情似乎工作正常（除了图像不扩展到列，我想要的）


• 这里是疯狂的部分：几次我点击了另一个标签，或回到我的网站后，访问另一个窗口和一切的工作要求。我发誓我见证了这一点，但我可以幻觉。

如果你能提供任何建议，我会非常感谢！非常感谢。

解决方案

您需要添加imagesLoaded事件侦听器。

  $（'。container'）。imagesLoaded（function（）{
 $（'。container'）。isotope（{...}）; 
}）; 
  

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:

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.

解决方案

You need to add the imagesLoaded event listener.

$('.container').imagesLoaded(function(){
    $('.container').isotope({...});
});

这篇关于无法使同位素与Bootstrap 3 .thumbnail一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！