apkm-search

Plugin Jquery phong cách so sánh hình ảnh – twentytwenty

Plugin tạo hiệu ứng hình ảnh độc đáo giống news.zing.vn.

Dạo gần đây nhiều người đặt câu hỏi về tính năng so sánh hình ảnh xưa và nay trên Zing.vn là dùng plugin gì ?Hôm nay mình xin giới thiệu đến các bạn plugin tạo hiệu ứng tương tự bằng Jquery.

twentytwenty là một plugin với tính năng so sánh và chỉ ra sự khác nhau giữ hai hình ảnh.Plugin này tạo một thanh ở giữa hình giúp bạn có thể kéo qua lại để so sánh giữa tâm hình phía trên và tấm hình phía dưới như hình phía dưới.

plugin so sanh hinh anh giong zing.vn

Cách sử dụng plugin twentytwenty

Download

Đầu tiên bạn phải download plugin này về.Chú ý đây là plugin jquery chứ không phải là của wordpress nhé.Plugin twentytwenty dành cho WordPress mình sẽ giới thiệu ở bài viết sau.

Sau khi đã có file thì bạn tiến hành giải nén và làm theo những bước sau

Chèn file CSS và JS của twentytwenty và thẻ head

Bạn cần tạo thêm cấu trúc HTML theo mẫu sau

Cần chèn thêm file jquery.event.move.js để sử dụng được sự kiên ‘movestart’, ‘move’ and ‘moveend’.

Sau khi hoàn thành các bước trên chúng ta tiến hành gọi plugin làm việc

Như vậy là đã hoàn thành rồi.Bạn chạy thử file vừa làm xem như thế nào.Nếu gặp lổi hay có gì thắc mắc xin để lại comment để mình giải đáp nhé.Chúc các bạn thành công !

BÌNH LUẬN BÀI VIẾT

Leave a Reply

1 Comment on "Plugin Jquery phong cách so sánh hình ảnh – twentytwenty"

Notify of
avatar
Sort by:   newest | oldest
vũ nguyễn Tiến1 năm gắn bó cùng NQDung.COMLevel 1
vũ nguyễn Tiến
1 comment

ad có video hướng dẫn không ạ em không hiểu

wpDiscuz