Simple Animated Image Caption Plugin For jQuery - imageTitle
File Size: | 38.2 KB |
---|---|
Views Total: | 1467 |
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.