0

私は素晴らしい同位体プラグインを実装しようとしていますhttp://isotope.metafizzy.co/index.html

フィルターの問題に直面しており、これまでのところ回避策を見つけることができません。

「すべて」のフィルター リンクをクリックするとすべてのアイテムが表示されますが、他のフィルター リンクをクリックするとすべてのアイテムが表示されなくなります。私は本当にいくつかの助けをいただければ幸いです:)

JSFiddleをセットアップしました

コードは次のとおりです。

HTML:

<div class="large-12 columns">
    <ul id="portfolio-filter">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".website">WEBSITE</a></li>
        <li><a href="#" data-filter=".logos">LOGOS</a></li>
        <li><a href="#" data-filter=".illustrations">ILLUSTRATIONS</a></li>
        <li><a href="#" data-filter=".brand">BRAND</a></li>
        <li><a href="#" data-filter=".ui">UI</a></li>
        <li><a href="#" data-filter=".icons">ICONS</a></li>
    </ul>
    <div id="portfolio-container">
        <ul class="small-block-grid-2">
            <li><div class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-02.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-03.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-04.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-05.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-06.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-07.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-08.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-09.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-10.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-11.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-12.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-13.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-14.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-15.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-16.jpg" alt=""></a></div></li>
        </ul>   
    </div><!-- /portfolio-container -->
</div><!-- /large-12 columns -->

JavaScript:

$(document).ready(function(){

  // cache container
  var $container = $('#portfolio-container');
  // initialize isotope
  $container.isotope({
    // options...
  });

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

1 に答える 1

1
  1. <li>セレクター クラスを内部の要素に直接適用し<ul class="small-block-grid-2">、画像の周囲から div を消去します。
  2. すべての img タグが適切に閉じられていることを確認してください<img ..... />。
  3. 同位体を適用する<ul class="small-block-grid-2">

HTML

<div id="portfolio-container">
    <ul class="small-block-grid-2">
        <li class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt="" /></a></li>
        ...
    </ul>
</div>

JavaScript

var $container = $('.small-block-grid-2');
// initialize isotope
$container.isotope({
    // options...
});

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

更新されたフィドル

于 2013-03-23T23:50:29.863 に答える