MooTools ImageCaption Plugin Demo

Demo page for ImageCaption: a MooTools Plugin for Auto-Captioning Images.

Example 1: no options specified

Curabitur purus nisl, porta quis ultricies at, lacinia quis felis. Vestibulum sed tellus id mi elementum euismod. Donec accumsan lorem at orci mollis porta. Donec vehicula odio et odio lacinia commodo.

Suspendisse potenti. Proin tristique dolor sed leo pellentesque ut vulputate mi iaculis. Etiam dictum elementum sapien, eu scelerisque lorem luctus a. Donec quis leo mauris, nec pharetra libero. Fusce dapibus, tortor vitae mollis imperdiet, odio tortor hendrerit ligula, at lobortis velit lectus ut odio.

Fusce sit amet ipsum orci, vel adipiscing mauris. In pulvinar, velit at pellentesque laoreet, mauris nunc accumsan lorem, imperdiet mattis lorem leo a mi. Nulla id libero nisi, a sollicitudin est. Phasellus arcu felis, condimentum nec ultrices eu, mattis nec tellus. Praesent quis mi quis diam fermentum congue ut sed dolor. Nulla metus libero, porta sed euismod id, viverra eget lorem. Donec scelerisque ullamcorper tincidunt. In pulvinar bibendum augue. Integer convallis consectetur sollicitudin. Aenean ullamcorper, massa vitae consequat interdum, risus leo accumsan orci, eu ullamcorper nibh felis at lorem. Cras tristique magna ac sem luctus egestas.

JavaScript for Example 1:

$(window).addEvent('domready', function(){
	// Basic implementation
	var basicCaption = new ImageCaption($$('#unstyled'));
});

CSS for Example 1:

/* Example 1: Default wrapper class */
.imageCaption {
 border:1px solid #ccc;
 text-align:center;
 padding:5px;
 background-color:#ebebeb;
 float:left;
 margin:0 10px 5px 0;
}

HTML for Example 1:

<img id="unstyled" src="img/yellow-flower.jpg" width="194" height="240" 
alt="A flower that is yellow." />

Example 2: wrapperClass set to 'captioned'

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quis sapien ligula, eget congue magna. Quisque dui mi, porta ut luctus et, lacinia eu mauris. Aliquam erat volutpat. Aenean eget sapien sapien. Duis tellus libero, lobortis hendrerit venenatis eget, volutpat sed nisl.

Integer porttitor justo non ligula consectetur vel tincidunt neque iaculis. Integer eu nunc tortor, eget porta nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis viverra sodales. Proin condimentum tincidunt tellus nec faucibus. Praesent vitae neque lacus. Nam non velit leo. Integer vulputate lectus sit amet purus facilisis luctus. Donec egestas, ipsum eu semper tristique, erat tellus ultricies erat, non aliquam mauris lacus eget elit. Proin suscipit consequat viverra. Ut elementum ullamcorper tellus quis molestie. Vivamus in risus non tellus tempor eleifend.

JavaScript for Example 2:

$(window).addEvent('domready', function(){
	// Instance with wrapperClass option
	var captionedCaption = new ImageCaption($$('#styled'), {
		wrapperClass: 'captioned'
	});
});

CSS for Example 2:

/* Example 2: wrapperClass: 'captioned' */
.captioned {
 border-top:2px solid #425287;
 border-right:2px solid #425287;
 border-bottom:2px solid #c0caed;
 border-left:2px solid #c0caed;
 padding:10px;
 float:right;
 background-color:#cfdafe;
 font:italic 12px Georgia, "Times New Roman", Times, serif;
 color:#036;
}
.captioned img {
 border-top:2px solid #425287;
 border-right:2px solid #425287;
 border-bottom:1px solid #c0caed;
 border-left:1px solid #c0caed;
}
.captioned span { margin-top:10px; }

HTML for Example 2:

<img id="styled" src="img/bricks.jpg" width="240" height="161" 
title="A stack of gray bricks." />

 

Example 3: captionPosition set to 'before'

Hac habitasse platea dictumst. Nulla a nisl libero, eu molestie sem. Cras non erat ut purus interdum egestas sit amet nec diam. Sed nec dolor justo, commodo iaculis est. Fusce eget neque turpis, sed tincidunt nulla. Etiam pharetra auctor sollicitudin. Quisque non enim nisl, sed tempus nibh. Fake link.

Aliquam mauris lectus, pretium nec ultricies sit amet, dapibus in ipsum. Maecenas semper dolor diam. In malesuada velit est, id dapibus quam.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras suscipit sapien sit amet velit laoreet venenatis. Mauris auctor, nisi ac lacinia convallis, ante felis vehicula tellus, sed iaculis lorem ligula eu est.

JavaScript for Example 3:

$(window).addEvent('domready', function(){
	// Instance with wrapperClass and captionPosition option
	var beforeCaption = new ImageCaption($$('#before'),{
		wrapperClass: 'captionBefore',
		captionPosition: 'before'
	});
});

CSS for Example 3:

/* Example 3: captionBefore */
.captionBefore {
 border-top:2px solid #c7b299;
 border-bottom:5px solid #c7b299;
 font:bold 12px/12px Arial, Helvetica, sans-serif;
 float:left;
 margin:5px;
 letter-spacing:1px;
 padding:10px;
 background-color: #e5ddd3;
 text-align:center;
}
.captionBefore span { margin-bottom:5px; }

HTML for Example 3:

<img id="before" src="img/leaf.jpg" width="240" height="175"
 alt="Image 3: The surface of a leaf." />

By Jacob Gube. Demo page for ImageCaption: a MooTools Plugin for Auto-Captioning Images.