Submit your widget
HomeImage EffectsjQuery Captify Simple Animated Image Captions

jQuery Captify Simple Animated Image Captions

Created 14 years ago   Views 16618   downloads 3219    Author n/a
jQuery Captify Simple Animated Image Captions
View DemoDownload
94
Share |

Using the ALT-attribute method:

 <img src="theimage.jpg" class="captify" alt="Caption Text" />

 

DIV-linked-by-REL-attribute Method:

<img src="theimage.jpg" class="captify" rel="caption1" />
<div id="caption1"> Whatever caption you like </div>

 

How do I use it?

$(function(){
 $('img.captify').captify({
  // all of these options are... optional
  // ---
  // speed of the mouseover effect
  speedOver: 'fast',
  // speed of the mouseout effect
  speedOut: 'normal',
  // how long to delay the hiding of the caption after mouseout (ms)
  hideDelay: 500, 
  // 'fade', 'slide', 'always-on'
  animation: 'slide',  
  // text/html to be placed at the beginning of every caption
  prefix: '',  
  // opacity of the caption on mouse over
  opacity: '0.7',     
  // the name of the CSS class to apply to the caption box
  className: 'caption-bottom', 
  // position of the caption (top or bottom)
  position: 'bottom',
  // caption span % of the image
  spanWidth: '100%'
 });
});

 

This javascript above should be wrapped in a <script> tag and then be placed in the <head> of your document, after you've included jquery.js and captify.tiny.js.

Note: Also, you need to copy-and-paste the necessary items out of the sample stylesheet into your own website's stylesheet. When you open it up, you'll see what needs to be copied right away.

One side-effect of the captions is that the captified images become wrapped in divs that float left. If you have text clinging to their right side, clear the float by adding this line right after the image:

<br class="c" />

 

If you don't want to take that route, just take out this block from the stylesheet, and that'll do the trick too :) 

.caption-wrapper {
float: left;
}



You might also like