jQuery plugin画像のキャプション表示
- Captify〔画像にロールオーバーでキャプションをオーバーレイ表示〕
- Easy way to improve your image gallery using jQuery〔画像にマウスオーバーで半透明のキャプション表示〕
- Image Captions〔画像にキャプションを動的に追加する〕
- jCaption〔マークアップ、スタイル、アニメーションをカスタマイズできる画像キャプション表示〕
Captify
画像にロールオーバーでキャプションをオーバーレイ表示
2009/3/3
jQuery Captify Plugin
Firefox、Chrome、Safari、Internet Explorer
jquery.js、captify.js v1.1
画像にマウスオーバーするとキャプションをオーバーレイ表示するjQueryプラグイン。
オプションのパラメータで、キャプションを表示するときのアニメーション効果（フェード、スライドなど）やアニメーション速度、透明度などを指定することができます。
下記の2つのサンプルが掲載されています。
- img要素のalt属性をキャプション表示
<img src='画像URL' class='captify' alt='キャプション' /> - imt要素のrel属性とdiv要素のid属性を関連付けて、div要素の内容をキャプション表示
<img src='画像URL' class='captify' rel='caption1' /> <div id='caption1'>キャプション</div>
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jQuery Captify Plugin | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/captify.js"></script>
<script type="text/javascript">
$(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%'
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* caption styling */
.caption-top, .caption-bottom {
color:#fff;
padding:1.2em;
font-weight:bold;
font-size:11px;
cursor:default;
border:0 solid #334143;
background: #000000;
}
.caption-top {
border-width:0 0 8px 0;
}
.caption-bottom {
border-width: 8px 0 0 0;
}
.caption a, .caption a {
border:0;
text-decoration:none;
background:#000;
padding:.3em;
}
.caption a:hover, .caption a:hover {
background:#202020;
}
.caption-wrapper {
float:left;
}
#images span { font-size:1.2em; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://masterfidgeter.com/projects/captify/'>jQuery Captify Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>img要素のalt属性をキャプション表示</h2>
<pre><img src="画像URL" <span class='red'>class="captify" alt="キャプション"</span> /></pre>
<div class="cf">
<a href="http://www.flickr.com/photos/22559849@N06/3274514408/"><img class="captify" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ<br>@アボガドダイニング Platinum Lounge" /></a>
<a href="http://www.flickr.com/photos/22559849@N06/3273696567/"><img class="captify" src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" alt="アボカド刺<br>@アボガドダイニング Platinum Lounge" /></a>
<a href="http://www.flickr.com/photos/22559849@N06/3273696469/"><img class="captify" src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" width="240" height="180" alt="ベーコンとアボカドのピザ（トマトソース）<br>@アボガドダイニング Platinum Lounge" /></a>
</div>
<h2>imt要素のrel属性とdiv要素のid属性を関連付けて、div要素の内容をキャプション表示</h2>
<pre><img src="画像URL" class="captify" rel="<span class='red'>caption1</span>" /><div id="<span class='red'>caption1</span>">キャプション</div></pre>
<div id="images" class="cf">
<a href="http://www.flickr.com/photos/22559849@N06/3273696493/"><img class="captify" title="ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr" rel="caption1" src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5.jpg" width="500" height="375" alt="Pilot and Index Peaks" /></a>
<div id="caption1"><a href="http://flickr.com"><span style="color: #00a2ff">Flick</span><span style="color: #ff0084">r</span></a><br>ハニートースト@アボガドダイニング Platinum Lounge by php_javascript_room</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
Easy way to improve your image gallery using jQuery
画像にマウスオーバーで半透明のキャプション表示
2008/12/21
Easy way to improve your image gallery using jQuery
jquery.js v1.2.6
画像ギャラリーを簡単に改造する方法として、画像にマウスオーバーした時に、jQueryを使用して半透明のキャプションを表示する方法が掲載されています。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Easy way to improve your image gallery using jQuery | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("a").mouseover(function(){
$(this).find(".textPlaceholder").show();
}).mouseout(function(){
$(this).find(".textPlaceholder").hide();
});
});
</script>
<!-- CSS -->
<style type="text/css">
ul { margin:0px; padding:0px; }
li { list-style-type:none; float:left; margin:15px; position:relative; padding:0px; }
li a { display:block; }
.textPlaceholder {
position:absolute;
/* height + top = 画像の高さ */
width:100%; height:50px;
top:130px; left:0;
margin:0; padding:0;
color:#fff; font-weight:bold;
text-decoration:none;
background-color:#000;
opacity:0.6; filter: alpha(opacity=50);
display:none;
cursor:pointer;
}
.textPlaceholder div { padding:10px; }
.textPlaceholder span { display:block; text-align:right; font-size:.8em; font-weight:normal; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.jankoatwarpspeed.com/post/2008/09/03/Easy-way-to-improve-your-image-gallery-using-jQuery.aspx'>Easy way to improve your image gallery using jQuery</a> | 設置サンプル</h1>
<p>▼画像にマウスオーバーすると、半透明のキャプションが表示されます。</p>
<!-- CODE -->
<div class="cf">
<ul>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/2974008614/">
<img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_m.jpg" alt="くまさんケーキ" />
<div class="textPlaceholder">
<div>くまさんケーキ<span>by PHP & JavaScript Room</span></div>
</div>
</a>
</li>
<li>
<a href="http://www.flickr.com/photos/22559849@N06/2973155055/">
<img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_m.jpg" alt="クリスピー・クリーム・ドーナツ" />
<div class="textPlaceholder">
<div>クリスピー・クリーム・ドーナツ<span>by PHP & JavaScript Room</span></div>
</div>
</a>
</li>
</ul>
</div>
<!-- /CODE -->
</div>
</body>
</html>
Image Captions
画像にキャプションを動的に追加する
2009/3/4
ImageCaptions
画像にキャプションを動的に追加するjQueyプラグイン。
画像にマウスオーバーした時に、img要素のalt属性の内容やrel属性で関連付けた要素をキャプション表示することができます。 オプションのパラメータで、キャプションの背景色、透明度、表示スピード、キャプション自動非表示の有無などを指定することができます。
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>ImageCaptions | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jquery.imagecaptions.js"></script>
<script type="text/javascript">
$(function(){
/* 例1：マウスオーバーでキャプション表示 */
$('.captionImage1').imageCaption({
toCaption: 'captionImage1',
});
/* 例2：マウスオーバーでキャプション表示（透明度指定） */
$('.captionImage2').imageCaption({
captionTipOpacity: '0.3',
toCaption: 'captionImage2'
});
/* 例3：マウスオーバーでキャプション表示（透明度＋スピード指定、アイコン付き） */
$('.captionImage3').imageCaption({
toCaption: 'captionImage3',
speedIn: 200,
speedOut: 200,
captionBoxOpacity: '0.5'
});
/* 例4：キャプション表示（透明度＋スピード＋背景色＋自動非表示の有無指定） */
$('.captionImage4').imageCaption({
toCaption: 'captionImage4',
speedIn: 200,
speedOut: 200,
captionBoxOpacity: '0.6',
captionBoxColor: '#39581c',
autoHide: false
});
/* 例5：キャプション表示（透明度＋スピード＋背景色＋自動非表示の有無指定） */
$('.captionImage5').imageCaption({
toCaption: 'captionImage5',
speedIn: 200,
speedOut: 200,
captionBoxOpacity: '0.8',
captionBoxColor: '#8C4235',
autoHide: false
});
/* 例6：キャプション表示（パネル開閉風） */
$('.captionImage6').imageCaption({
toCaption: 'captionImage6',
speedIn: 200,
speedOut: 200,
captionBoxOpacity: '1',
captionTipOpacity: '0.3',
captionBoxColor: '#a33117',
captionTipColor: '#a33117'
});
});
</script>
<!-- CSS -->
<style type="text/css">
table { border:0; width:100%; }
/* caption styling */
.captionText, .captionTip { font-size:11px; }
.captionTip strong { padding-left:5px; }
/*** 例4 */
.captionWrap_captionImage4 a { color:#fff; font-weight:bold; }
.captionWrap_captionImage4 a:hover { color:#ffff99; }
/*** 例5 */
.captionWrap_captionImage5 a { color:#fff; font-weight:bold; }
.captionWrap_captionImage5 { border:1px solid #fff; }
.captionWrap_captionImage5 .captionText { border-top:1px solid #fff; }
/*** 例6 */
.captionWrap_captionImage6 a { color:#fff; text-decoration:none; }
.captionWrap_captionImage6 .captionTip { text-align:right; }
.captionWrap_captionImage6 .captionText div { font-size:12px; color:#dfcea2; }
.subicon { border:1px solid #fff; margin:5px 5px auto 5px; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://plugins.jquery.com/project/imagecaptions'>jQuery Captify Plugin</a> | 設置サンプル</h1>
<!-- CODE -->
<div class="cf">
<!-- 例1 -->
<img id="Image1" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" class="captionImage1" alt="アボカド シーザーサラダ" />
<!-- 例2 -->
<img id="Image2" src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" class="captionImage2" alt="@アボガドダイニング Platinum Lounge" />
<div rel="Image2" class="captionTip"><strong>アボカド刺</strong></div>
<!-- 例3 -->
<img id="Image3" src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" width="240" height="180" class="captionImage3" alt="" />
<table rel="Image3" class="captionText">
<tr>
<td width="100%"><strong style="font-size:12px;">ベーコンとアボカドのピザ</strong><br>（トマトソース）</td>
<td width="16"><a href="#" onclick="alert('Save');return false;"><img src="/content/img/icon/photo.png" alt="Save" /></a></td>
</tr>
</table>
</div>
<div class="cf">
<!-- 例4 -->
<img id="Image4" src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" width="240" height="180" class="captionImage4" alt="" />
<table rel="Image4" class="captionText">
<tr>
<td><strong style="font-size:12px;">ハニートースト</strong></td>
<td width="25%" nowrap="nowrap"><a href="#" onclick="alert('Find More!');return false;">もっと探す</a></td>
</tr>
<tr>
<td colspan="2">@アボガドダイニング Platinum Lounge</td>
</tr>
</table>
<!-- 例5 -->
<a href="#"><img id="Image5" src="http://farm4.static.flickr.com/3396/3274514302_10521a0a98_m.jpg" width="240" height="180" class="captionImage5" alt="" /></a>
<table rel="Image5" class="captionText">
<tr>
<td><strong style="font-size:12px;">アボガドディップ</strong></td>
<td width="25%" nowrap="nowrap"><a href="#" onclick="alert('Find More!');return false;">もっと探す</a></td>
</tr>
</table>
<!-- 例6 -->
<img id="Image6" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" class="captionImage6" alt="" />
<div rel="Image6" class="captionTip"><img src="/content/img/ajax/imagecaptions_more.gif" alt="" width="43" height="15" /></div>
<div rel="Image6" class="captionText">
<div style="margin:5px; overflow:hidden;">
<a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img class="subicon" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_t.jpg" alt="" align="left" /></a>
よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。
</div>
</div>
</div>
<!-- / CODE -->
</div>
</body>
</html>
jCaption
マークアップ、スタイル、アニメーションをカスタマイズできる画像キャプション表示
2009/3/8
jCaption
ページにキャプションを簡単に追加できるようにデザインされたjQueryプラグイン。
img要素の取得し、表題のマークアップとしてimg要素の属性の1つ（alt属性など）を使用します。 表題は、任意のスタイルとマークアップの指定を下記のオプションでカスタマイズするｋとができます。
/* 画像とキャプションをラップする要素 */ wrapperElement: 'div', /* ラップ要素のクラス名 */ wrapperClass: 'caption', /* キャプション要素 */ captionElement: 'p', /* キャプションに表示する内容を指定する画像の属性 */ imageAttr: 'alt', /* インラインスタイルはimg要素からラップ要素までコピーすべきか */ copyStyle: true, /* 画像からインラインスタイルを削除するか */ removeStyle: true, /* 画像からalign属性を削除するか */ removeAlign: true, /* ラップ要素のクラス名として画像のalign属性の値を割り当て */ copyAlignmentToClass: true, /* 画像にラップ要素の幅を合わせるか */ autoWidth: true, /* 画像にマウスオーバーした時のアニメーション */ animate: false, /* 表示時のアニメーション */ show: {opacity: 'show'}, showDuration: 200, /* 非表示時のアニメーション */ hide: {opacity: 'hide'}, hideDuration: 200
設置イメージ設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jCaption | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/content/lib/jquery/jcaption.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
$('#exp1 img').jcaption();
/* 例2 */
$('#exp2 img').jcaption({
copyStyle: false,
animate: true, /* アニメーションの有無 */
show: {height: "show"},
hide: {height: "hide"}
});
});
</script>
<!-- CSS -->
<style type="text/css">
/* 例1 */
#exp1 div.caption { margin:0 10px 10px 0; padding:5px; border:1px solid #ccc; background:#fff; float:left; }
#exp1 div.right { margin-right:0; }
div.left { margin-left:0; }
#exp1 div.caption img { margin:0; padding:0; width:240px; height:180px; }
#exp1 div.caption p { margin:5px 0 0 0; padding:5px; border-top:1px #ddd dotted; font-size:.9em; }
/* 例2 */
#exp2 div.caption { margin:0 10px 10px 2px; padding:0; position:relative; float:left; }
#exp2 div.caption p { position:absolute; margin:0; padding:2px; font-size:.9em; bottom:0; left:0; background:black; color:white; opacity:.7; }
#exp2 div.caption img { margin:0; padding:0; }
</style>
</head>
<body>
<div id="wrap">
<h1><a href='http://www.newmediacampaigns.com/page/jcaption-a-jquery-plugin-for-simple-image-captions'>jCaption</a> | 設置サンプル</h1>
<!-- CODE -->
<h2>例1：img要素のalt属性に指定した値をキャプションとして表示</h2>
<div id="exp1" class="cf">
<img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" />
<img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" alt="アボカド刺@アボガドダイニング Platinum Lounge" />
</div>
<h2>例2：画像にマウスオーバーしたときにキャプションをアニメーションしながらオーバーレイ表示</h2>
<div id="exp2" class="cf">
<div class="caption"><a href="http://www.flickr.com/photos/22559849@N06/3274514408/" title="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" alt="アボカド シーザーサラダ@アボガドダイニング Platinum Lounge" /></a></div>
<div class="caption"><a href="http://www.flickr.com/photos/22559849@N06/3273696567/" title="アボカド刺@アボガドダイニング Platinum Lounge by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" width="240" height="180" alt="アボカド刺@アボガドダイニング Platinum Lounge" /></a></div>
</div>
<!-- / CODE -->
</div>
</body>
</html>