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
   
Simple Animated Image Caption Plugin For jQuery  - imageTitle

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.