MIT license


The MIT license is an
open-source license.
Free Read License

14 Day money-back guarantee

Full refund within 14 days of purchase date.

You need to log-in or create an account
  • Create an account
  • Log-in

Please use your real name.

Activation link will be sent to this address.

Minimum 8 characters

Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

mooCaption

mooCaption
Developed by Marcelo Origoni, Released Feb 2, 2011

mooCaption adds captions to images, with various effects, and any position. The Caption can fade in, slide it, or be always present.

JavaScript

Tags: caption , contest2011 , image , image caption

What's mooCaption?

mooCaption is a library that will allow you to a caption to images in your website.

How to use it?

You'll need a few thing to use it. First of all the mootools Core library
the file is included in the download, along with the mooCaption file.
You need to include the 2 files in betweend the and of your html code. and don't forget the style sheet.
then just add to your domready event, the call to mooltiSelect, something like:

window.addEvent('domready', function(){  
var captions = new mooCaption({});  
captions.captionize();  
});  

Which Properties you can pass to mooltiSelect, and which are the default values?

This are the available options:

speedOver: 'short',  
speedOut: 'normal',  
mode: 'slide',            
classposition: 'caption',  
position: 'bottom',  
slideFrom: 'normal',  
images: 'capt',  
opacity: '0.7',  
transition: 'Quart.easeIn'  

speedOver speed of the mouseover effect # short' - 250ms # 'normal' - 500ms # 'long' - 1000ms, or any number od ms.
speedOut speed of the mouseout effect # short' - 250ms # 'normal' - 500ms # 'long' - 1000ms, or any number od ms.
mode 'fade', 'slide', 'on', 'random', if random selected, any of the other 3 effects will be applied..
classposition the name of the CSS class to apply to the caption box .
position position of the caption (top or bottom).
slideFrom 'left', 'right' or 'normal'. Defines the side from where the caption slides in, defaults to 'normal'.
images class of the images, if blank, all images in the page.
opacity set the final opacity of the caption. transition set the transition used by slide or fade modes, for more info about this, plese check Fx.Transitions.

is there any special markup I need to know?

Yes there is a requirement in the CSS, the caption must have position: relative and float: left, otherwise, won't work on Firefox AND Internet Explorer.

is it compatible with every browser?

I only tested it on firefox 3.6, and Internet explorer 8, it should work fine with Opera, and Safari (and any other Webkit browser), but I can't assure that.

User Reviews

No reviews have been submitted yet.

Questions & Comments


Or enter your name and Email
No comments have been posted yet.
You must be logged-in to vote. Log-in to your account or register now.