• címkék:
  • masonry
  • szűrés
  • filter
  • responsive
  • fluid
  • grid

Isotope

A plugin-ban rengeteg lehetőség rejlik, azonban ennek most csak egy kisebb része kerül szemléltetésre, de aki az ízelítő láttán kedvet kap a plugin használatához, az a hivatalos honlapon (isotope.metafizzy.co) további hasznos példákat/bemutatókat találhat (plusz a letölthető állományban is megtalálhatóak!).

Mivel a plugin szemléltető oldalát nem szerettem volna hosszú-hosszú példakódokkal elrondítani, így maga a bemutató egy külön oldalra került, míg az ott használt kódok alább tekinthetőek meg.

A sok nagyméretű kép miatt az oldal betöltődésére (és a plugin aktivizálódására) lehet várni kell!

Példa

Deklaráció

A deklaráció a sok szűrési akció beállítása miatt eléggé hosszúra sikeredett, de jelenleg ez csak a szemléltetés miatt ilyen terjedelmes, normális esetben függvények alkalmazásával az ismétlődő kódokat egyszerűbben is meg lehet(ne) írni!

        $(document).ready(function(){
          var container = $('#pelda');

          container.imagesLoaded( function(){
            container.isotope({
              itemSelector : '.element',
              resizable: true,
              masonry: { columnWidth: container.width() / 4}
            });
          })

          $('.filterCivic').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.civic', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterNsx').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.nsx', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterCrx').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.crx', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterCrz').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.crz', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterFit').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.fit', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterAccord').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.accord', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterS2000').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.s2000', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterWhite').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.white', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterBlack').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.black', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterBlue').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.blue', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterRed').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.red', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterGrey').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.grey', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterYellow').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.yellow', masonry: { columnWidth: container.width() / 4}})
          })

          $('.filterAll').click(function(e){
            e.preventDefault();
            container.isotope({ filter: '.element', masonry: { columnWidth: container.width() / 4}})
          })
          
          $(window).smartresize(function(){
            container.isotope({ masonry: { columnWidth: container.width() / 4 }})
          })
        });
      

HTML kód

        <div class="menu">
          <ul>
            <li><a class="filterAll" href="#">Összes</a></li>
            <li class="separator"> </li>
            <li><a class="filterCivic" href="#">Civic</a></li>
            <li><a class="filterNsx" href="#">NSX</a></li>
            <li><a class="filterCrx" href="#">CR-X</a></li>
            <li><a class="filterCrz" href="#">CR-Z</a></li>
            <li><a class="filterFit" href="#">Fit</a></li>
            <li><a class="filterAccord" href="#">Accord</a></li>
            <li><a class="filterS2000" href="#">S2000</a></li>
            <li class="separator"> </li>
            <li><a class="filterWhite" href="#">Fehér</a></li>
            <li><a class="filterBlack" href="#">Fekete</a></li>
            <li><a class="filterBlue" href="#">Kék</a></li>
            <li><a class="filterRed" href="#">Piros</a></li>
            <li><a class="filterGrey" href="#">Szürke</a></li>
            <li><a class="filterYellow" href="#">Sárga</a></li>
          </ul>
        </div>
        <div id="pelda">
          <div class="element civic black">
            <img src="images/img1.jpg" alt="" />
          </div>
          <div class="element civic blue">
            <img src="images/img2.jpg"  alt="" />
          </div>
          <div class="element nsx yellow">
            <img src="images/img3.jpg" alt="" />
          </div>
          <div class="element s2000 red">
            <img src="images/img4.jpg" alt="" />
          </div>
          <div class="element s2000 red">
            <img src="images/img5.jpg" alt="" />
          </div>
          <div class="element civic">
            <img src="images/img6.jpg" alt="" />
          </div>
          <div class="element accord black">
            <img src="images/img7.jpg" alt="" />
          </div>
          <div class="element accord white">
            <img src="images/img8.jpg" alt="" />
          </div>
          <div class="element accord white">
            <img src="images/img9.jpg" alt="" />
          </div>
          <div class="element civic">
            <img src="images/img10.jpg" alt="" />
          </div>
          <div class="element civic grey">
            <img src="images/img11.jpg" alt="" />
          </div>
          <div class="element s2000 white">
            <img src="images/img12.jpg" alt="" />
          </div>
          <div class="element civic grey">
            <img src="images/img13.jpg" alt="" />
          </div>
          <div class="element fit black">
            <img src="images/img14.jpg" alt="" />
          </div>
          <div class="element nsx white">
            <img src="images/img15.jpg" alt="" />
          </div>
          <div class="element crz black">
            <img src="images/img16.jpg" alt="" />
          </div>
          <div class="element crz white">
            <img src="images/img17.jpg" alt="" />
          </div>
          <div class="element nsx black">
            <img src="images/img18.jpg" alt="" />
          </div>
          <div class="element civic black">
            <img src="images/img19.jpg" alt="" />
          </div>
          <div class="element crz black">
            <img src="images/img20.jpg" alt="" />
          </div>
          <div class="element fit black">
            <img src="images/img21.jpg" alt="" />
          </div>
          <div class="element s2000 grey">
            <img src="images/img22.jpg" alt="" />
          </div>
          <div class="element crx white">
            <img src="images/img23.jpg" alt="" />
          </div>
          <div class="element nsx black">
            <img src="images/img24.jpg" alt="" />
          </div>
          <div class="element fit white">
            <img src="images/img25.jpg" alt="" />
          </div>
          <div class="element crz white">
            <img src="images/img26.jpg" alt="" />
          </div>
          <div class="element crx white">
            <img src="images/img27.jpg" alt="" />
          </div>
          <div class="element fit black">
            <img src="images/img28.jpg" alt="" />
          </div>
          <div class="element nsx red">
            <img src="images/img29.jpg" alt="" />
          </div>
          <div class="element fit black">
            <img src="images/img30.jpg" alt="" />
          </div>
          <div class="element crx black">
            <img src="images/img31.jpg" alt="" />
          </div>
          <div class="element crz white">
            <img src="images/img32.jpg" alt="" />
          </div>
          <div class="element crx grey">
            <img src="images/img33.jpg" alt="" />
          </div>
          <div class="element fit black">
            <img src="images/img34.jpg" alt="" />
          </div>
          <div class="element fit white">
            <img src="images/img35.jpg" alt="" />
          </div>
          <div class="element civic white">
            <img src="images/img36.jpg" alt="" />
          </div>
          <div class="element accord white">
            <img src="images/img37.jpg" alt="" />
          </div>
          <div class="element s2000 black">
            <img src="images/img38.jpg" alt="" />
          </div>
          <div class="element accord black">
            <img src="images/img39.jpg" alt="" />
          </div>
          <div class="element s2000 black">
            <img src="images/img40.jpg" alt="" />
          </div>
          <div class="element s2000 yellow">
            <img src="images/img41.jpg" alt="" />
          </div>
          <div class="element fit yellow">
            <img src="images/img42.jpg" alt="" />
          </div>
          <div class="element civic yellow">
            <img src="images/img43.jpg" alt="" />
          </div>
          <div class="element accord blue">
            <img src="images/img44.jpg" alt="" />
          </div>
          <div class="element nsx blue">
            <img src="images/img45.jpg" alt="" />
          </div>
          <div class="element civic blue">
            <img src="images/img46.jpg" alt="" />
          </div>
        </div>
      

« bezár