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

Đăng bởi supernovice trong mục Hướng dẫn vào 29 tháng 5, 2010 | Comments

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.

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 jQueryjQuery 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

Bạn có thích bài viết này?

supernovice's picture

supernovice

Phạm Văn Du - Web developer , SEO Guru tại Bình Dương

Trang chủ - Twitter