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

HTML

Tạo Caption cho hình ảnh sử dụng jQuery Drop Captions Plugin

Được viết bởi QuangIT ngày 30/08/2013 lúc 12:03 AM
jQuery Drop Captions - plugin của jQuery giúp thể hiện caption cho ảnh ấn tượng hơn với hiệu ứng Animation.
  • 0
  • 1618
Tải tệp tin: Click ở đây

Tạo Caption cho hình ảnh sử dụng jQuery Drop Captions Plugin


jQuery Drop Captions - plugin của jQuery giúp thể hiện caption cho ảnh ấn tượng hơn với hiệu ứng Animation.

jq-dropcaption.jpg

jQuery Drop Captions Plugin sẽ tự động lấy thuộc tính title của hình ảnh và chuyển chúng làm caption, caption sẽ xuất hiện khi bạn rê chuột vào hình ảnh

Cách sử dụng :

Trước tiên, bạn cần download jQuery và jQuery Drop Captions Plugin ( và jQuery easing plugin nếu bạn muốn sử dụng các hiệu ứng khác). Sau đó thêm vào trong thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<!-- jQuery Drop Captions Plugin -->
<script type="text/javascript" src="js/jquery.dropcaptions.js"></script>
<!-- Easing Plugin (nếu bạn muốn sử dụng các hiệu ứng khác) -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
<!-- .blacksheep và .autocap là các class của hình ảnh  -->
// Cách sử dụng đơn giản
    $('.blacksheep').dropCaptions();
    // Tùy biến
$('.autocap').dropCaptions({
showSpeed: 1000,
showOpacity: .85,
hideOpacity: .25,
showEasing: 'easeOutBounce',
showDelay: 500,
hideDelay: 1000
});
});
</script>

Mã HTML :

<img height="199" width="300" class="blacksheep" src="img1.jpg" title="jQuery Drop Captions Plugin" />
<img height="199" width="300" class="autocap" src="img1.jpg" title="jQuery Drop Captions Plugin" />

 Ngoài ra jQuery Dropdown caption còn có thể kết hợp với Lightbox và các plugin khác. Bạn có thể xem demo tại đây

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