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