Cách sử dụng jQuery Imagelens

Thảo luận trong 'Rao Vặt Miền Bắc' bắt đầu bởi springriver, 7/3/15.

  1. springriver

    springriver Thành Viên Mới

    Tham gia ngày:
    6/1/15
    Bài viết:
    64
    Đã được thích:
    0
    Điểm thành tích:
    6
    joomla minify js giới thiệu tới các bạn 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).

    [​IMG]
    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.
     
    Cảm ơn đã xem bài:

    Cách sử dụng jQuery Imagelens

    Đang tải...


Like và Share ủng hộ ITSEOVN