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ề:
Sau đó thêm vào site của bạn :
ta có đoạn HTML như sau:
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:
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
trong đó sample01.jpg là ảnh được zoom.
Bạn cũng có thể thay đổi cỡ lens:
Bạn có thể thay đổi màu viền của len bằng lệnh:
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.
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
HTML:
<script src="jquery.imageLens.js" type="text/javascript"></script>
HTML:
<img id="img_01" src="king.png" width="384" height="240"/>
HTML:
<script type="text/javascript">
$(function () {
$("#img_01").imageLens();
});
</script>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" });Bạn cũng có thể thay đổi cỡ lens:
HTML:
$("#img_01").imageLens({ lensSize: 200 });
HTML:
$("#img_01").imageLens({ borderSize: 8, borderColor: "#06f" });
