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.

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