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

Đăng bởi Neo trong mục Hướng dẫn vào 12 tháng 3, 2010 | Comments
Xem Demo

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.

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

jquery, plugin, captions

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

Neo's picture

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 Big Grin. 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.

Trang chủ - Twitter