blog.web68.vn

OUR SPONSORS

Phóng to hình ảnh sử dụng jQuery Zoom


GIỚI THIỆU

Nếu bạn đang cần một plugin đơn giản cho jquery giúp bạn có thể phóng to hình ảnh thì jquery zoom là một sự lựa chọn rất đáng để bạn xem xét sử dụng, jquery zoom hỗ trợ các thao tác click, chạm hay là di chuyển chuột, cho phép tùy biến hiển thị một cách rất linh động.

jquery zoom plugin

HƯỚNG DẪN SỬ DỤNG

Dưới đây mình sẽ hướng dẫn các bạn sử dụng jquery zoom để hiển thị hình ảnh phóng to ngay trong khung hình khi di chuyển chuột vào

1. Thêm vào Javascript & CSS

<script src='https://cdn.rawgit.com/jackmoore/zoom/master/jquery.zoom.min.js'></script>

2. HTML

Lưu ý: Do jquery zoom thêm HTML vào trong element được gọi nên element đó phải là các thẻ hỗ trợ html, ví dụ: <a>, <span>, <li>, <div> v.v..., thẻ <img> thì không sử dụng được.

<span class='zoom' id='ex1'>
    <img src='http://www.babywallpaper.us/user-content/uploads/wall/o/55/170720136.jpg' width='500' height='400' alt='Baby Wallper'/>
</span>

3. Gọi hàm khởi tạo khi trang đã sẵn sàng

$(document).ready(function(){
  $('#zoom1').zoom();
});

DEMO

See the Pen jQuery Zoom by Thanh Nguyen (@genievn) on CodePen.

TÙY BIẾN

Thuộc tính Mặc định Mô tả
url false Đường dẫn đến hình ảnh được hiển thị, nếu không có, jquery zoom sẽ sử dụng src của thẻ IMG đầu tiên bên trong element được gọi.
on 'mouseover' Sự kiện sẽ kích hoạt hiệu ứng zoom: mouseover, grab, click, or toggle.
duration 120 Tốc độ fadeIn/fadeOut của hình ảnh được phóng lớn.
target false DOM element được chọn để chứa hình ảnh được phóng to.
touch true Cho phép sử dụng thao tác chạm.
magnify 1 Hệ số phóng to của hình ảnh, mặc định là 1, tương ứng với kích cỡ 100% của ảnh.
callback false Hàm được gọi khi hỉnh ảnh đã được tải xong
onZoomIn false Hàm được gọi khi hình ảnh được phóng to
onZoomOut false Hàm được gọi khi hình ảnh được thu nhỏ

Tags
jquery  plugin  phóng-to  hình-ảnh  hiệu-ứng  javascript  
comments powered by Disqus