Cách sử dụng jQuery Imagelens

Plugin imagelens cho phép bạn tùy biến kích thước của lens, màu sắc viền lens, chọn một ảnh khác để zoom (không cần load ảnh gốc ngay từ đầu).



Cách sử dụng rất đơn giản, bạn vào đây để download file jquery. imageLens.js về:

HTML:

http://www.dailycoding.com/posts/imagelens__a_jquery_plugin_for_lens_effect_image_zooming.aspx

Sau đó thêm vào site của bạn :

HTML:

<script src="
	
jquery.
	
imageLens.js" type="text/javascript"></script>

ta có đoạn HTML như sau:

HTML:

<img id="img_01" src="king.png" width="384" height="240"/>

Bạn nhớ thẻ img phải có 1 id, ta sẽ gọi id này ra để nó có hiệu ứng imagelens, để cho ảnh có hiệu ứng imagelens, ta có đoạn script sau:

HTML:

<script type="text/javascript">
$(function () {
$("#img_01").
	
imageLens();
});
</script>

Như các bạn thấy ta gán hiệu ứng vào id của image.

Có các cách tùy chọn của imagelens như sau:

Nếu bạn muốn ảnh thumbnai khác với ảnh được zoom, bạn viết lệnh

HTML:

$("#img_01").
	
imageLens({ imageSrc: "sample01.jpg" });

trong đó sample01.jpg là ảnh được zoom.

Bạn cũng có thể thay đổi cỡ lens:

HTML:

$("#img_01").
	
imageLens({ lensSize: 200 });

Bạn có thể thay đổi màu viền của len bằng lệnh:

HTML:

$("#img_01").
	
imageLens({ borderSize: 8, borderColor: "#06f" });

Nếu bạn sử dụng trình duyệt từ IE8 trở xuống, lens sẽ có hình vuông thay vì hình tròn.