Hướng dẫn cách thêm jQuery TwentyTwenty so sánh 2 hình ảnh cực đẹp và mượt cho website

Admin

Administrator
Thành viên BQT
#1
Hướng dẫn cách thêm jQuery TwentyTwenty so sánh 2 hình ảnh cực đẹp và mượt cho website

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.

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.csstwentytwenty.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
Mã:
<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>
Mã:
<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
Mã:
<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:

twentytwentymaster.png


1.gif

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ụ:
Mã:
<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:

twentytwenty-2.png


2.gif

So sánh theo chiều dọc
Chúc các bạn thành công.


Nguồn: blog.chuyenlaptrinh.net​
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top