Cấp bậc tác giả:

HTML

Cloud Zoom: jQuery Plugin giúp phóng to hình ảnh với nhiều tính năng

Được viết bởi webmaster ngày 13/08/2013 lúc 05:35 PM
Cloud Zoom một plugin jQuery tương đối nhẹ, độ tùy chỉnh cao giúp bạn dễ dàng thêm các hình ảnh có thể được phóng to vào trong trang web. Một số tính năng Cloud Zoom hỗ trợ như thêm màu, phóng to ngay trong ảnh, làm mềm mại ảnh.
  • 0
  • 2221
Tải tệp tin: Click ở đây

Cloud Zoom: jQuery Plugin giúp phóng to hình ảnh với nhiều tính năng


Cloud Zoom một plugin jQuery tương đối nhẹ, độ tùy chỉnh cao giúp bạn dễ dàng thêm các hình ảnh có thể được phóng to vào trong trang web. Một số tính năng Cloud Zoom hỗ trợ như thêm màu, phóng to ngay trong ảnh, làm mềm mại ảnh.

cloudzoom.jpg

Cloud Zoom rất dễ dàng thực hiện. Bạn dễ dàng có thể tùy chỉnh các ảnh nhỏ , ống kính và cửa sổ ảnh phóng to bằng CSS. Ngoài ra Cloud Zoom còn hỗ trợ một số cấu hình như chiều cao, chiều rộng của cửa sổ zoom, pha màu, độ trong suốt, độ mềm mại khi di chuyển, bật tắt tiêu đề.

Cách sử dụng :

Trước tiên, bạn cần download jQuery jQuery UICloud Zoom. Sau đó thêm vào trong thẻ <head> của trang web:

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.7.2.custom"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/cloud-zoom.css"/>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>

Mã Html :

<!-- class cloud-zoom phải có , các tùy chỉnh đều nằm trong thẻ rel -->
<a href='images/bigimage00.jpg' class ='cloud-zoom' rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10">
<img  src="images/smallimage.jpg" title="Optional title display" alt=''/>
</a>

Chi tiết hơn về các tùy biến tại trang chủ Cloud Zoom

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML