标签: jquery-isotope

我第一次使用 jQuery Isotope 插件并且非常喜欢一些结果，但是我在尝试让“组合过滤器”与“排序”选项一起工作时遇到了一些问题。

我有一个过滤器和排序一起工作，但是我无法让排序功能与我的组合过滤器一起使用。

我的脚本看起来像这样，

<script type="text/javascript"> 
  $(function(){

    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.element',

        getSortData : {
          name : function ( $elem ) {
            return $elem.find('.name').text();
          }
        }
      });

    // filter buttons
    $('.filter a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group …

我正在使用Dave Desandro的完全踢屁股Isotope插件来构建一个项目,到目前为止,一切都很顺利.但是,在我页面的右上角,我想使用角落标记功能始终保持特定位置.

出现角落标记,但其他元素似乎没有承认它.有什么想法吗？jQuery的的同位素部分可以看到下面,并全面测试页面可以看到这里.任何帮助深表感谢.谢谢!

<script>
$(function(){

  var $container = $('#container');

  $container.isotope({
    itemSelector: '.brick',

    masonry: {
     columnWidth: 250,
     cornerStampSelector: '.corner-stamp'
    }
  });

  // filter items when filter link is clicked
  $('header a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });
});

按照这个JSFiddle,我创建了一个包含我的每个元素的同位素容器,点击其中一个链接(左下角)我想重新排序元素,将匹配的元素拉到我容器的左边.

我这样做是通过从DOM中删除它们并将它们移动到包含div的顶部.如果您检查浏览器的控制台,您会看到这种情况成功发生,但以下对Isotope的调用(重绘)会触发回调,但似乎不会触发实际的重绘.不完全确定为什么会这样,是否有人能够解释？

我想将SELECT/OPTION与UNORDERED LIST结合用于jQuery同位素组合滤波器.我让它使用多个SELECT/OPTION,但无法弄清楚如何结合SELECT和UL.有帮助吗？

这是我的jsfiddle:http://jsfiddle.net/fgLUa/36/

我有一个具有"粘滞便笺"功能的网站.根据显示器分辨率在站点中对齐笔记我正在使用Isotope插件.

 <script type="text/javascript">
$(function(){

  var $container = $('#sticky-note');

  $container.isotope({
    itemSelector: '.note',
    resizesContainer: true
  });

  // remove item if clicked
  $container.delegate( '.uzdaryti', 'click', function(){
    $container.isotope( 'remove', $(this) );
  });

});

那个笔记:

    <li class="melynas note">
    <a href="#" class="uzdaryti">X</a>
    <p>Lorem ipsum dolor sit amet.</p>
    <div class="data">2012.10.17 13:42</div>
    </li>

我不知道怎么做与类的链接.uzdaryti将删除整个列表项.我试图用$('.note')更改$(this),但点击该链接会删除所有注释.

我有以下问题.Isotope始终将容器的高度设置为0px.

我检查了花车和其他常见的问题来源.一切似乎都很好.

我的被​​激活元素的类看起来像这样:

div#image-area div {
    width: 6.25%;
    height: 6.25%;
}

我正在使用jQuery Isotope来过滤Portofolio部分

我的过滤器

      <div id="filters" class="portfolioSection">
        <ul>
          <li><a class="current" href="#" data-filter="*">All</a></li>
          <li><a href="#" data-filter="category-1">Category 1</a></li>
          <li><a href="#" data-filter="category-2">Category 2</a></li>
          <li><a href="#" data-filter="category-3">Category 3</a></li>
        </ul>
      </div>

内容部分

<div class="portfolioContent">
            <ul class="row">
              <li class="portfolio element category-1 category-2"><img src="img/project1.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project2.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project3.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li class="portfolio element category-3"><img src="img/project4.png">
                <div class="projectName">Project Name</div>
                <div class="projectCategory">Category 1</div>
              </li>
              <li …

根据几个SO成员的建议,我决定尝试在网页上使用Jquery Isotope.我也在使用Bootstrap 3,并且无法获得缩略图库(具有不同大小的横向/纵向方向图像)看起来不错.

我正在使用Bootstrap 3 .thumbnail类来调整图像大小以适应响应列.一切都很好,直到我将Isotope应用于这些缩略图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 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-->

这是Isotope脚本:

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

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

这与Bootstrap 3 css相关联,并且我的定制CSS也在那里.出于某种原因,它似乎在小提琴中工作正常(除了它正在削减底部图像的事实),但它在我的网站上看起来完全不同.正如您将看到的,它就像它不计算div的垂直高度,只是裁剪它们并将它们堆叠在一起.

还有几点:

• 我很确定它与Bootstrap 3的.thumbnail类有关.当我从链接中删除该类时,事情似乎工作正常(除了图像不会扩展到列,我想要)
• 这是一个疯狂的部分:有几次我点击了另一个标签,或者在访问另一个窗口后回到我的网站,并且一切都在工作.我发誓我亲眼目睹了这一点,但我可能会产生幻觉.不确定这是否意味着它的工作非常,非常,非常慢或某些东西,但是？

如果您能提出任何建议,我将非常非常感激!非常感谢你提前.

我正在使用metafizzy'同位素来过滤项目。

我有2个过滤器行：category1（电缆，工具，stuff1，stuff2）和category2（电缆1，cable2，tool1，tool2）。

如果在合并两个类别时没有结果，是否可以停用过滤器（使用CSS，例如灰色）？

示例：我单击过滤器“ stuff2”，并且在category2中没有匹配的项目，因此jQuery将一个类添加到category2，例如将其灰显。

我的同位素代码：

jQuery.noConflict();
(function($){
    var $container = $('#container'),
    filters = {};

$container.isotope({
  itemSelector : '.element',
      {mfilterscript}
      {mfilterscript2}
});

// filter buttons
$('.filter a').click(function(){
  var $this = $(this);
  // don't proceed if already selected
  if ( $this.hasClass('selected') ) {
    return;
  }

  var $optionSet = $this.parents('.option-set');
  // change selected class
  $optionSet.find('.selected').removeClass('selected');
  $this.addClass('selected');

  // store filter value in object
  // i.e. filters.color = 'red'
  var group = $optionSet.attr('data-filter-group');
  filters[ group ] = $this.attr('data-filter-value');
  // convert object into array
  var …

我正在使用Isotope放置一些工作正常的网格元素.现在我需要在layoutcomplete上运行一些代码,所以我添加了事件并最终得到以下代码.

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

    $container.isotope('on', 'layoutComplete',
        function (isoInstance, laidOutItems) {
            ...
        }
    );
});

除了在页面加载时不执行layoutcomplete之外,这一切都正常工作,当然这是因为在init之后添加了事件.然后我尝试设置isInitLayout:false但是接下来有什么问题 - 我希望我可以使用.arrange()但没有运气.

任何能弄清楚如何在页面加载时执行layoutComplete的人？