Nhúng GIF hoạt hình như Facebook với jqGifPreview
Twitter và Facebook có rất nhiều người chia sẻ ảnh GIF động hằng ngày. Nếu tất cả đều được phát tự động, chúng có thể khủng khiếp trong nguồn cấp dữ liệu.
Cả hai mạng xung quanh điều này với một tính năng nhấp để xem trước cho tất cả các GIF. Điều này cho phép người dùng chọn họ muốn xem hoạt hình nào bằng cách chọn thời điểm bắt đầu / dừng hoạt hình.
Với plugin jqGifPreview, bạn có thể mang chức năng tương tự đến trang web của bạn.
Điều này plugin jQuery miễn phí hoạt động trên tất cả các GIF trên trang hoặc có thể nhắm mục tiêu cụ thể bất kỳ thứ gì bạn muốn. Đó là một tài nguyên tuyệt vời nhưng mất một chút thời gian để thiết lập.
Một GIF tạm dừng thực sự chỉ là một khung hình của hình ảnh động, hiển thị trên trang.
Thật không may, plugin này không làm tự động kéo một hình ảnh tĩnh từ GIF cho bạn. Nhưng, bạn có thể thực hiện việc này bằng PHP hoặc bất kỳ ngôn ngữ phụ trợ nào khác, vì vậy với một chút mã, điều này có thể được tự động hóa.
Plugin này sử dụng thuộc tính data- * để lưu trữ vị trí hình ảnh GIF. Khi người dùng nhấp vào hình ảnh, nó sẽ tự động tải vào src thuộc tính của hình ảnh và được hiển thị trên màn hình.
Đơn giản, hiệu quả, và chắc chắn là một hiệu ứng gọn gàng! Tất cả những gì bạn cần là các tệp CSS / JS cho plugin này mà bạn có thể lấy trực tiếp từ GitHub. Và tất nhiên, bạn sẽ cần một bản sao của jQuery, quá.
Từ đó, bạn thiết lập hình ảnh của mình như thế này:
Chính src thuộc tính nên chứa hình ảnh tĩnh. Bạn có thể tạo tập lệnh để tạo tập lệnh hoặc bạn có thể chỉnh sửa & tải lên ảnh tĩnh cho mỗi GIF theo cách thủ công.
Các dữ liệu-gif thuộc tính giữ GIF hoạt hình thực sự và họ sẽ trao đổi khi nhấp chuột nếu bạn nhắm mục tiêu lớp hình ảnh chính (trong trường hợp này, nó .myImg). Bây giờ, tất cả những gì bạn cần là một dòng jQuery để làm cho tất cả hoạt động:
$ (". myImg"). jqGifPreview (); Chắc chắn, một trong những plugin jQuery thú vị nhất tôi đã thấy trong tháng này và nó khá dễ cài đặt.
Bạn có thể tìm hiểu thêm bằng cách truy cập Trang GitHub và cũng có một xem trước bản demo trực tiếp được lưu trữ trên trang web của nhà phát triển.
