Bài 19: Tạo hiệu ứng Gallery filter với thư viện Isotope js

0

Trong bài học này, mình sẽ hướng dẫn các bạn tao hiệu ứng gallery filter với thư viện Isotope js. Bài trước chúng ta cũng đã làm qua hiệu ứng này nhưng bằng code jquery tự viết. Bài này mình sẽ dùng thư viện ngoài Isotope js nhé.

Video – Tạo hiệu ứng Gallery filter với thư viện Isotope js

Ý tưởng

+ Bắt sự kiện click từ button hoặc thẻ để lấy giá trị từ thuộc tính bên trong thẻ. Các bạn có thể dùng theo dạng data- tên thuộc tính tự đặt hoặc tên thuộc tinh tự đặt. Ví dụ nhé, chúng ta sẽ lấy loại của hình ảnh bằng cách thêm thuộc tính data-type hoặc type cho button.

+ Lọc các hình ảnh không có class trùng với giá trị lấy từ thuộc tính.

Cách dùng thư viện Isotope mình sẽ hướng dẫn bên dưới. Nếu bạn nào muốn tự code bằng jquery có thể tham khảo bài 18: Tạo hiệu ứng Gallary filter bằng jQuery.

Hướng dẫn thực hiện

Các thư viện cần thêm vào là jquery isotope

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Phần HTML

<ul class="menu">
   <li data-type="type1">Loại 1</li>
   <li data-type="type2">Loại 2</li>
   <li data-type="type3">Loại 4</li>
   <li data-type="all">Tất cả</li>
</ul>
<div class="title">Tất cả</div>
<div class="content">
   <img src="img/1.png" class="hinh all type1">
   <img src="img/2.png" class="hinh all type2">
   <img src="img/3.png" class="hinh all type3">
   <img src="img/4.png" class="hinh all type4">
   <img src="img/5.png" class="hinh all type5">
   <img src="img/6.png" class="hinh all type6">
</div>

Phần CSS

*{
   margin: 0;
   padding: 0;
}
html,body{
   width: 100%;
   height: 100%;
   background: #f5f5f5;
}
ul.menu{
   width: 400px;
   margin: auto;
   margin-top:20px;
   display: flex;
   justify-content: space-between;
}
li {
   list-style: none;
   background: #fff;
   color: #212121;
   padding: 10px 12px;
   font-size: 16px;
   cursor: pointer;
   box-shadow: 3px 5px 5px rgb(0,0,0,0.23);
   border-radius: 2px;
}
.title {
   padding: 10px 12px;
   text-align: center;
   font-size: 36px;
   color: #212121;
}
.content{
   width: 1170px;
   margin: auto;
}
img.hinh {
   width: 30%;
   margin: 10px;
}

Phần JS – Jquery

+ Chúng ta chạy hàm khởi tạo isotope(itemSelector: ‘img’) chỉ phần tử sẽ được lọc

+ Dùng filter

jQuery(document).ready(function($) {
   $('.content').isotope({
      itemSelector: 'img'
   });
   $('ul li').click(function(event) {
      // var type = $(this).attr('data-type');
      var type = $(this).data('type');
      // console.log(type);
      var ten_loai = $(this).text();
      $('.title').text(ten_loai);
      type = '.'+type;
      $('.content').isotope({
         filter:type
      });
   });
});

Nếu bạn dùng cách 2 thay thuộc tính data-type bằng type, bạn dùng hàm attr() để lấy dữ liệu từ thuộc tính (attribute).

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.