• LOGIN
  • No products in the cart.

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

November 28, 2021

0 responses on "Isotope jQuery Plugin"

Leave a Message

Your email address will not be published. Required fields are marked *

© BZIT Online Institute All rights reserved | 2021