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

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
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

Private
Tham gia
20/02/2017
Bài viết
31
Được Like
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

Sergeant
Tham gia
30/01/2017
Bài viết
639
Được Like
276
<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

MasterCorporal
Tham gia
28/07/2015
Bài viết
399
Được Like
198
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

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom