Cách mở rộng hình thu nhỏ như Google Images
Google Images chạy một giao diện người dùng duy nhất với xem trước hình thu nhỏ từ nhiều trang web khác nhau. Nhấp vào bất kỳ hình thu nhỏ nào sẽ mở rộng màn hình với nhiều chi tiết hơn và hình lớn hơn.
Đây là một trong những tính năng bộ sưu tập hình ảnh tốt nhất mà tôi đã sử dụng và bây giờ, bạn có thể sao chép nó với Gridder.js.
Plugin jQuery miễn phí này đi theo bước chân của UX đáng kinh ngạc của Google bằng cách tạo một plugin phù hợp với hiệu ứng này. Bạn có thể biến bất kỳ thư viện ảnh nào thành thư viện kiểu Google Images với tất cả các hình ảnh động và tính năng hiển thị giống nhau.
Tôi rất ngạc nhiên bởi tốc độ và sự dễ sử dụng đi kèm với plugin này. Chỉ cần nhấp vào bất kỳ hình thu nhỏ ngay lập tức hiển thị một shot lớn hơn và các hình ảnh động là siêu sạch.
Những hình ảnh bao gồm một phần cho văn bản mô tả trong trường hợp bạn muốn thêm một số chi tiết hoặc liên kết liên quan đến các bức ảnh. Điều này đặc biệt tốt cho các trang web danh mục đầu tư đơn giản với mục tiêu tập trung vào hình ảnh.
Trên hết, bạn có thể cũng kéo nội dung qua Ajax. Điều này cho phép bạn tạo hình thu nhỏ động lấy nội dung từ các trang web khác hoặc thông qua API.
Mỗi sự kiện click cung cấp một phương thức gọi lại, do đó, bạn thậm chí có thể chạy các plugin hoặc hàm JavaScript khác cùng với Gridder. Với rất nhiều tùy chọn, thực tế nó có cảm giác như toàn bộ khung lưới!
Kể từ Gridder chạy trên jQuery, Nó đòi hỏi phiên bản mới nhất như là một phụ thuộc. Nhưng, đó là tất cả những gì bạn cần (cùng với tệp Gridder.js) và với một vài dòng HTML, bạn có thể giúp lưới của mình chạy trơn tru.
Bạn nên xem trang GitHub cho hướng dẫn thiết lập đầy đủ nhưng đây là một xem nhanh HTML trông như thế nào:
Tất cả nội dung được kéo qua JavaScript, vì vậy bạn có thể tải khá nhiều thứ bạn muốn.
Đây là một plugin cực kỳ linh hoạt với các tùy chọn để thay đổi tốc độ hình ảnh động, nới lỏng, đóng kiểu nút và vị trí bù cuộn khi người dùng nhấp vào hình thu nhỏ mới.
Newbie và các nhà phát triển chuyên nghiệp cũng sẽ tìm thấy rất nhiều giá trị trong plugin này. Tuy nhiên, nếu bạn vẫn không chắc chắn liệu đây có phải là dành cho bạn hay không, hãy xem trang demo của Gridder trực tiếp và chơi xung quanh.
