jQuery Captify Plugin
jQuery Captify Plugin cho phép bạn hiển thị caption của ảnh khi di chuột qua. Plugin chạy tốt trên Firefox, Chrome, Safari, và Internet Explorer. Cũng như các plugin khác, Captify khá nhẹ (chỉ 2.3 KB) và dễ sử dụng.
Tất cả những gì bạn cần làm là thêm class="captify" vào trong thẻ img mà bạn muốn thể hiện caption. Caption sẽ sử dụng text của thẻ alt hoặc của một thẻ div.
Captify cho phép bạn tùy biến hiệu ứng, thời gian chờ, tốc độ, độ trong suốt, vị trí và chiều rộng của caption.
Cách sử dụng
Trước tiên, bạn cần download jQuery và Captify plugin. Sau đó thêm vào trong thẻ <head> của trang web:
<!-- Thư viện jQuery --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- Captify plugin --> <script type="text/javascript" src="js/captify.tiny.js"></script>
Ví dụ
<!-- Sử dụng text của thẻ alt --> <img src="theimage.jpg" class="captify" alt="Caption Text" /> <!-- Lấy text từ thẻ div --> <img src="theimage.jpg" class="captify" rel="caption1" /> <div id="caption1"> Whatever caption you like </div>
Mã javascript với các tùy biến:
$(function(){
$('img.captify').captify({
// Tốc độ của hiệu ứng khi di chuột vào
speedOver: 'fast',
// Tốc độ của hiệu ứng khi dời chuột
speedOut: 'normal',
// Thời gian dừng trước khi ẩn caption khi dời chuột (ms)
hideDelay: 500,
// Hiệu ứng sử dụng, gồm có :'fade', 'slide', 'always-on'
animation: 'slide',
// text/html đặc trước tất cả các caption
prefix: '',
// Độ trong suốt của caption
opacity: '0.7',
// Tên class áp dụng cho box caption
className: 'caption-bottom',
// Vị trí của caption (top hoặc bottom)
position: 'bottom',
// Chiều rộng của caption (tính theo % so với chiều rộng ảnh)
spanWidth: '100%'
});
});
Hoặc bạn chỉ cần sử dụng cách đơn giản với các thông số mặc định
$(function(){
$('img.captify').captify();
});
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.