Isotope jQuery Plugin

Isotope বহুল ব্যবহৃত ফ্রি jQuery Plugin গুলোর মধ্যে একটি। ফিল্টারিং করার জন্য এই প্লাগিন টি ব্যবহৃত হয়ে থাকে।

ব্যবহারবিধিঃ প্লগিন টি ব্যবহারের জন্য আপনার HTML ডকুমেন্টে একটি জাভাস্ক্রিপ ফাইল লিংক-আপ করতে হবে।  Download Link

HTML মার্ক-আপ

<!-- Buttons -->
<div class="button-group filter-button-group">
   <button data-filter="*">Show All</button>
   <button data-filter=".web">Web Design</button>
   <button data-filter=".graphic">Graphic Design</button>
   <button data-filter=".photo">Photography</button>
</div>

 <!-- Layout -->
<div class="grid">
   <div class="grid-item web"></div>
   <div class="grid-item graphic"></div>
   <div class="grid-item web"></div>
   <div class="grid-item photo"></div>
</div>

JS মার্ক-আপ

$(document).ready(function ($) {
setTimeout(function(){ 
          // filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  percentPosition: true,
  masonry: {
    // use element for option
    columnWidth: '.grid-item'
  }
});
     }, 1000);
});

আরও জানতে ভিজিট করুন |  Download Link