Hiệu ứng so sánh ảnh cũ ảnh mới với jQuery Plugin twentytwenty

Plugin này có tác dụng tạo ra 1 đường thẳng so sánh, người dùng sẽ di chuyển thanh ngang để xem sự khác biệt giữa 2 bức ảnh như thế nào.

Demo online: https://jquery-image-comparison-plugins-twenty-twenty--kentrung.repl.co

Link plugin: https://github.com/zurb/twentytwenty

Tại file index.html chúng ta cần link tới các file sau:

twentytwenty.css
jquery.js
jquery.event.move.js
jquery.twentytwenty.js

Chúng ta cần 2 bức ảnh để tạo so sánh, tốt nhất là chúng cùng kích thước.

Code toàn bộ file index.html như sau:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="twentytwenty-master/css/twentytwenty.css"/>
    <style type="text/css">
        .container {width: 1000px;margin: 50px auto;}
        .text-center {text-align: center;}
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">jQuery Image Comparison Plugins</h1>
        <h3 class="text-center">twentytwenty</h3>
        <div id="container1">
            <!-- The before image is first -->
            <img src="images/1.jpg" />
            <!-- The after image is last -->
            <img src="images/2.jpg" />
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="twentytwenty-master/js/jquery.event.move.js"></script>
    <script src="twentytwenty-master/js/jquery.twentytwenty.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#container1").twentytwenty({
                default_offset_pct   : 0.7,          // How much of the before image is visible when the page loads
                orientation          : 'horizontal', // Orientation of the before and after images ('horizontal' or 'vertical')
                no_overlay           : true,         // Do not show the overlay with before and after
                move_slider_on_hover : false,        // Move slider on mouse hover?
                move_with_handle_only: true,         // Allow a user to swipe anywhere on the image to control slider movement. 
                click_to_move        : true          // Allow a user to click (or tap) anywhere on the image to move the slider to that location.
            });
        });
    </script>
</body>
</html>

Giải thích một số option.


default_offset_pct   : 0.5,           // Tọa độ vị trí thanh so sánh ở đâu, giá trị từ 0 -> 1
orientation          : 'horizontal',  // Thanh ngang nằm dọc hay nằm ngang
before_label         : 'Jan 2017',    // Tạo ra tên của ảnh lúc trước
after_label          : 'March 2017',  // Tạo ra tên của ảnh lúc sau
no_overlay           : true,          // Có tạo 1 lớp blackmask phủ lên trên ảnh hay không?
move_slider_on_hover : true,          // Thanh so sánh có đi theo khi di chuột trên ảnh hay không?
move_with_handle_only: true,          // Có cho phép người dùng vuốt bất cứ nơi nào trên ảnh để di chuyển thanh so sánh?
click_to_move        : false          // Có click vào ảnh để thanh so sánh di chuyển đến tọa độ đó?

Tải toàn bộ demo tại https://ufile.io/8myb1uni