Hướng dẫn Thêm hiệu ứng phóng to hình ảnh bằng jQuery plugin cloud-zoom

[PVS]

Thêm hiệu ứng phóng to hình ảnh bằng jQuery plugin cloud-zoom

Bài viết này sẽ giới thiệu một hiệu ứng khá hay với jQuery, khi bạn hover chuột lên hình ảnh thì sẽ có một hình ảnh phóng to tại phạm vi bao quanh chuột, chức năng giống như một chiếc kính lúp sẽ giới thiệu sau đây thuộc về tác giả R Cecco ở địa chỉ professorcloud.com.

Để sử dụng chúng ta cần có cấu trúc HTML như sau:

<link href="cloud-zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/JavaScript" src="cloud-zoom.1.0.2.js"></script>
<a href='images/zoom/hs-buildings-1.jpg' class = 'cloud-zoom' id='zoom1' rel="adjustX: 10, adjustY:-4, softFocus:false, smoothMove:5, zoomWidth: 500">
   <img src="images/thums/hs-buildings-1.jpg" alt='' align="left" title="Optional title display" />
</a>

Ở trên thẻ img sẽ là hình thumnail còn liên kết của thẻ a sẽ là đường dẫn tới hình sẽ phóng to ở đây bạn phải đặt class=cloud-zoom để xác định hình ảnh sẽ sử dụng chức năng cloud-zoom. Thuộc tính rel sẽ chứa các tùy chọn cho hiệu ứng.
Chúng ta định kiểu cho hình phóng to trong file cloud-zoom.css

Để xem demo, tải chương trình và xem hướng dẫn chi tiết về các tùy chọn cũng như cách sử dụng bạn truy cập tại địa chỉ professorcloud.com.

Chúc các bạn thành công.

Nguồn: sothichweb.com​