Hướng dẫn 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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,048
Reaction score
7,283
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​
 

nminhkhoi

Thượng Đế
Tham gia
20/02/2017
Bài viết
31
Reaction score
10
<div class="twentytwenty-container"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div>
cái này em chưa hiểu cho lắm
VD: cụ thể trên xenforo thì làm sao để gọi twentytwenty trong chỗ post trả lời
 

tuna

Thượng Đế
Tham gia
30/01/2017
Bài viết
641
Reaction score
246
<div class="twentytwenty-container"> <img src="img/1_1.jpg" /> <img src="img/1_2.jpg" /> </div>
cái này em chưa hiểu cho lắm
VD: cụ thể trên xenforo thì làm sao để gọi twentytwenty trong chỗ post trả lời
ừ nhỉ, không biết bbcode của cái này là gì :v
 

dinhhai

Thượng Đế
Tham gia
28/07/2015
Bài viết
393
Reaction score
196
Cái này làm sao đưa vào bài viết dc bác @PVS nhỉ?
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom