Simple Animated Image Caption Plugin For jQuery - imageTitle
| File Size: | 38.2 KB |
|---|---|
| Views Total: | 1476 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
imageTitle is a simple lightweight jQuery plugin helps you create customizable image caption hover effects that appear on rollover.
How to use it:
1. Include the _imageTitle.css in the head of the document.
<link href="css/_imageTitle.css" rel="stylesheet">
2. Include jQuery library and the jQuery imageTitle plugin at the bottom of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="script/_jquery.imageTitle.js"></script>
3. Insert an image with caption into your document body.
<div class="captionfull"> <img src="http://lorempixel.com/200/150/sports">
<div class="cover boxcaption">
<div class="boxgrid_title">Image Title</div>
<div class="boxgrid_con">More details<br>
More details</div>
</div>
</div>
4. Initialize the plugin and custom the image caption.
$(".captionfull").imageTitle({
type:"captionfull"
});
5. Options and defaults.
$(".captionfull").imageTitle({
// type: captionfull, caption, slideright, thecombo, slidedown
type:"captionfull",
// image height
height:"rightArrow",
// image width
width:"firstMenu",
// the image distance from top
top:0,
// the image distance from left
left:0,
// the image caption distance from top
showTop:180,
// the image caption distance frm left
showLeft:200,
// animation speed
speed:300
});
This awesome jQuery plugin is developed by niuben. For more Advanced Usages, please check the demo page or visit the official website.










