Như bài trước mình đã giới thiệu về Plugin Image Zoom khi click vào ảnh. Tuy nhiên plugin này có một nhược điểm là không sử dụng được trên di động. Tuy dùng trên desktop là khá ngon, nhưng không dùng được trên mobile thì rất khó để đưa vào sử dụng.

Chính vì vậy mình cũng đã sưu tầm được plugin có chức năng zoom ảnh tương tự và có khả năng chạy tốt trên mobile. Trước tiên bạn click vào đây để thực hiện tải plugin

Hướng dẫn cài đặt
<script type="text/javascript" src="jquery.zoom.min.js"></script>
Hướng dẫn sử dụng
$("article").find("[data-form=image]").find(".zoom").each(function ()
{
    var on = $(this).attr("data-on");
    $(this).zoom({ on: on });
});

Thuộc tính on ở đây có 3 giá trị: grab: Chế độ click vào ảnh, giữ chuột vào thực hiện zoom, click: Chế độ click vào ảnh và thực hiện zoom, toogle: Chế độ click vào 1 vị trí ảnh để thực hiện zoom. Nếu null: Chế độ mặc định là di chuột qua ảnh là đã thực hiện zoom ngay.

Ở đây chú ý thuộc tính transition của ảnh phải để unset, nếu không thì các chế zoom sẽ rất giật

img { transition: unset; }
Sau đây là ví dụ minh họa
Ngọc Trinh nữa hoàng nội y
Di chuột qua ảnh để thực hiện Zoom
Gái ngon xứ hàn mặc đồ gợi cảm chiếm trọn spotlight thảm đổ
Click vào ảnh và di chuột thực hiện Zoom
Nữ sinh tinh khôi
Click ảnh, giữ chuột để thực hiện Zoom
Girl xinh áo dài
Click ảnh vào một vị trí để thực hiện Zoom

Chúc các bạn sử dụng plugin thành công

Sơn 20 sưu tầm