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