 |
| Hình demo |
1. Giới thiệu
TwentyTwenty là 1 plugin được viết bằng jquery dùng để so sánh sự khác biệt giữa 2 hình ảnh. Nếu bạn hay đọc báo từ 2 trang zing.vn và 24h.com.vn sẽ thấy họ thường dùng plugin này để so sánh sự khác biệt giữa hình ảnh thời xưa và nay hoặc so sánh 2 hình ảnh của sản phẩm, ...
Hôm nay mình sẽ hướng dẫn bạn cài đặt plugin này vào website của bạn. Điều đặc biệt là plugin này hoàn toàn miễn phí và cách cài đặt vào website cũng cực kỳ dễ dàng :v
2. Hướng dẫn cài đặt:
Bước 1: Tải TwentyTwenty về tại địa chỉ https://github.com/zurb/twentytwenty/archive/master.zip và giải nén.
Bước 2: Sau khi giải nén bạn tiến hành sao chép 2 file foundation.css và twentytwenty.css từ thư mục css và 2 file jquery.event.move.js, jquery.twentytwenty.js từ thư mục js vào mã nguồn của bạn (để ở đâu trong mã nguồn của bạn thì tuỳ bạn)
Bước 3: Khai báo đoạn lệnh sau vào trong thẻ <head></head> ở trang muốn sử dụng plugin
<link href="css/foundation.css" rel="stylesheet" type="text/css" />
<link href="css/twentytwenty.css" rel="stylesheet" type="text/css" />
Tiếp tục khai báo đoạn lệnh sau vào cuối thẻ mở <body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/jquery.event.move.js"></script>
<script src="js/jquery.twentytwenty.js"></script>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.5});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.5, orientation: 'vertical'});
});
</script>
Bạn có thể thay thế giá trị default_offset_pct thành giá trị trong khoảng từ 0 đến 1. Đó là thuộc tính chỉ vị trí của hình mũi tên sẽ được hiển thị mặc định ở giữa 2 hình.
Chú ý: vì mình chứa các file css và js của mình ở 2 thư mục css và js ngoài thư mục gốc nên đường dẫn ở attribute href và src mình là vậy, còn bạn để ở chỗ khác thì sửa đường dẫn cho đúng nhé.
Bước 4: Khai báo đoạn lệnh sau vào nơi bạn muốn hiển thị 2 hình ảnh được so sánh
<div class="twentytwenty-container">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
Bạn nhớ thay src thành đường dẫn đến hình ảnh của bạn. Chú ý rằng 2 hình ảnh nên có size bằng nhau thì sẽ đẹp nhất.
Kết quả sẽ được tương tự như sau:
 |
| So sánh theo chiều ngang |
Mặc định 2 hình được so sánh theo chiều ngang. Nếu bạn muốn so sánh theo chiều dọc thì bổ sung lệnh data-orientation="vertical" trong thẻ <div class="twentytwenty-container">. Ví dụ:
<div class="twentytwenty-container" data-orientation="vertical">
<img src="img/1_1.jpg" />
<img src="img/1_2.jpg" />
</div>
Kết quả sẽ được tương tự như sau:
 |
| So sánh theo chiều dọc |
EmoticonEmoticon