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

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

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

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

demo page

…ここからが続き

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の設定を変更する事で変更が可能です。

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

demo page

Comments

tai

tai

このスクリプトを使うと、ページ内の全ての画像に効果が適用されてしまいます。
classかidを振った特定の画像にのみ適用するには、スクリプトをどう修正すれば良いのでしょう?

2010年11月04日 01:29

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article