画像にALTに記述したキャプションを表示するスクリプト「jCaption」

Category
： Javascript

「jCaption」は画像のオルトを利用して、画像の上にキャプションを表示するスクリプトです。

今回は「jCaption」の使い方などを紹介したいと思います。

jCaptionの使い方

配布元のサイト「jCaption: jQuery Image Captions with Customizable Markup, Style and Animation」から一式ダウンロードしてきます。

自分のサイトに使いたい場合はそのファイルの中に入っている、「jcaption.min.js」だけを抜き取る形で大丈夫です。

head内

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">google.load("jquery", "1.2");</script>
<script type="text/javascript" src="js/jcaption.min.js"></script>
<script language="JavaScript" type="text/javascript">
	$(document).ready(function(){
		$('img').jcaption({
			copyStyle: true,
			animate: true,
			show: {height: "show"},
			hide: {height: "hide"}
		});
	});
</script>

CSS

img {  border: none; }
div.caption {
	position: relative;
}
div.caption p {
	margin: 0;
	font-size: .9em;
	position: absolute;
	bottom: 0;
	left: 0;
	background: #FFF; 
	color: #333;
	opacity: .7;
}

キャンプション内はこのCSSの設定を変更する事で変更が可能です。

ちょっとした変更をデモページの方でしていますので、参考にして下さい。