Hướng dẫn cài đặt

Bước đầu tiên bạn có thể tải thư viện plugin image zoom tại đây. Sau đó cài đặt như sau.

<link rel="stylesheet" href="image-zoom.css" />
<script src="image-zoom.min.js"></script>

Tiếp theo bạn tìm tới các phần img và gọi plugin

$("article").find("[data-form=image]").find("img").each(function ()
{
    $(this).imageZoom({ zoom: 200 });
});

Ở đây thuộc tính zoom mặc định là 150.

Cách thức hoạt động
  1. Click vào ảnh muốn phóng to ảnh
  2. Di chuyển con chuột trong phạm vi ảnh để xem ảnh được phóng to
  3. Để thoát chế độ zoom thì ta di chuột ra khỏi vị trí ảnh hoặc click chuột
Sau đây là ví dụ minh họa
Thiếu nữ đeo khẩu trang
Thiếu nữ bắn cung

Plugin này rất hữu dụng trong các trang bán hàng và show sản phẩm cho khách hàng các bạn nhé. Chúc các bạn sử dụng plugin thành công

Sơn 20 - Sưu tầm Plugins