Share Sử dụng thư viện ImageLens để tạo hiệu ứng zoom hình ảnh

[filiallion]

Language

Tiếng Việt

ImageLens là thư viện được viết trên jQuery với hiệu ứng zoom ảnh theo các mức độ được khai báo. Ngoài tính năng zoom ảnh thì thư viện ImageLens còn hỗ trợ một vài hiệu ứng hình ảnh đơn giản khi zoom. Trong số các thư viện jQuery dùng để zoom ảnh thì thư viện ImageLens là một thư viện hay, nhỏ gọn và đơn giản trong cách thể hiện hiệu ứng, rất phù hợp với các website yêu cầu đơn giản trong trình bày.

Để sử dụng thư viện ImageLens các bạn phải tích hợp thư viện jQuery vào website. Các bạn có thể tải thư viện jQuery tại địa chỉ https://jquery.com/download.

Các bạn tải thư viện ImageLens tại địa chỉ http://www.dailycoding.com/Uploads/2011/03/imageLens.zip và xem trước các ví dụ tại địa chỉ http://www.dailycoding.com/Uploads/2011/03/imageLens/demo.html.

Các bạn tích hợp thư viện ImageLens vào website với dòng lệnh như sau:

<script src="path/to/jquery.imageLens.js"></script>

Và khai báo sử dụng thư viện ImageLens như sau:

$(function() {
    $('#image-lens').imageLens();
});

Sau đó áp dụng hiệu ứng zoom hình ảnh như ví dụ sau:

<img src="path/to/image.jpg" id="image-lens">

Các bạn có thể tìm hiểu thêm về thư viện ImageLens tại địa chỉ http://www.dailycoding.com/Posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx.