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

09:28 am GMT +7 Hanoi |

Trang chủ ›

Trao đổi - học tập ›

Mã nguồn

Thêm vào trang Google +

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 jQuery và jQuery UI và Cloud Zoom. Sau đó thêm vào trong thẻ <head> của trang web:

CODE


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

CODE


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

Demo

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

Thêm vào trang Google +

Số lần xem : 5217

Đánh giá

Facebook

Bài viết liên quan

08/12/2014 11:05 Mã nguồn website bán hàng bằng cakephp
14/05/2012 10:11 Tạo bàn phím ảo trên ứng dụng web, Jquery virtual keyboard
30/12/2010 21:00 Code lấy thông tin chứng khoán
12/12/2010 13:24 Flash noel , trang chủ giáng sinh
04/12/2010 00:30 Ajax autosuggest , ajax auto complete text field

Bài viết mới hơn

<< Trang trước