0

立ち上げ中のサイトでIsotope フィルタリングを使用していますが、フィルタリングをトリガーするはずのリンクをクリックしても何も起こらない理由がわかりません。

(テスト) ページはここでライブで見ることができます: 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

実際には、2 つの JavaScript 関数の間に競合があることがわかりました。Shopify テーマに付属する scripts.js を省略すると、魅力的に機能します。

于 2013-06-24T18:32:02.590 に答える