0

我在一个正在启动的站点上使用同位素过滤，我无法弄清楚为什么当我单击应该触发过滤的链接时什么都没有发生。

（测试）页面可以在这里看到：http ://www.youngandsmitten.com/pages/frontpage

我在这里创建了一个 jsfiddle：http: //jsfiddle.net/UeBnU/

我在这里做错了吗？或者，当我在整个 Shopify 卷积之上构建网站时，某处是否存在冲突？

任何帮助将非常感激！谢谢各位！

我使用的html是：

<div class="portfolioFilter p15">Filter: <a class="current" href="#" data-filter="*">All Designs</a> <a href="#" data-filter=".forkids">For Kids</a> <a href="#" data-filter=".animals">Animals</a> <a href="#" data-filter=".food">Food</a> <a href="#" data-filter=".objects">Objects</a></div>
<div class="portfolioContainer">
<div class="objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_01.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_02.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_03.jpg?1869" /></div>
<div class="forkids animals"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_04.jpg?1869" /></div>
<div class="animals objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_05.jpg?1869" /></div>
<div class="forkids food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_06.jpg?1869" /></div>
<div class="food objects"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_07.jpg?1869" /></div>
<div class="food"><img alt="image" src="http://cdn.shopify.com/s/files/1/0231/2635/files/ZZZ_09.jpg?1869" /></div>
</div>

额外的 CSS 非常基础：

.portfolioFilter { padding: 10px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; text-transform: uppercase; }
.portfolioFilter a { margin-right: 10px; color: #666; text-decoration: none; }
.portfolioFilter a:first-child { margin-left: 50px; }
.portfolioFilter a.current, a:hover { color: #e81c1c; }
.portfolioContainer img { margin: 5px; }

.isotope-item { z-index: 2; }
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; transition-property: transform, opacity; }

JavaScript：

  <script>
    $(window).load(function(){
        var $container = $('.portfolioContainer');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });

        $('.portfolioFilter a').click(function(){
            $('.portfolioFilter .current').removeClass('current');
            $(this).addClass('current');

            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
             });
             return false;
        }); 
    });
  </script>
4

2 回答 2

0

如我所见，您复制了

var selector = $(this).attr('data-filter'); $container.isotope({ filter: selector });

来自官方文档。您将必须提供该数据字段的同位素项目（在您的情况下为图像）。

<div data-filter="whatever"> .... </div>

然后它将选择每个设置了 data-filter="whatever" 的属性。

Desandro（同位素的创造者）也有相当不错的 jsfiddles，只是谷歌的 desandro jsfiddle。但这应该让您了解 Isotope 中过滤的工作原理。

http://jsfiddle.net/desandro/GwBa8/

于 2013-06-23T17:00:02.017 回答
0

我发现两个javascript函数之间实际上存在冲突。一旦我省略了Shopify主题附带的 scripts.js，它就像一个魅力。

于 2013-06-24T18:32:02.590 回答