Hiệu ứng phóng ảnh với cloud zoom

Ứng dụng phóng ảnh, được sử dụng trong các trang thương mại điện tử, như các mặt hàng có hình ảnh. Muốn xem chi tiết từng bộ phận. Dưới đây là 1 ví dụ điển hình:

Cloud zoom sử dụng jquery & css . Để thực hiện, bước đầu tiên các bạn chèn thư viện vào web:

<link rel="stylesheet" type="text/css" href="http://phutho.net.vn/official/cloud-zoom/cloud-zoom.css"/>
<script type="text/javascript" src="http://phutho.net.vn/official/cloud-zoom/cloud-zoom.1.0.2.min.js"></script>

Download thư viện Cloud zoom tại đây.

Để sử dụng thư viện này, bạn chỉ cần đoạn code html với thuộc tính đặc biệt, cloud zoom sẽ tự động khởi tạo ứng dụng.

Ví dụ:
Chèn đoạn mã html sau vào trong thẻ body (Chú ý: chèn thư viện jquery trước).

<a href='http://phutho.net.vn/examples/images/1.png' class = 'cloud-zoom' id='zoom1'
            rel="adjustX: 10, adjustY:-4">
            <img width="202" height="90" src="http://phutho.net.vn/examples/images/1.png" alt='' title="Optional title display" />
        </a>

Đặt đường dẫn hình ảnh lớn trong thuộc tính href, còn lại tạo <img là ảnh nhỏ.
Kết quả minh hoạ:



Để biết chi tiết, vui lòng truy cập Click.