| ベーコンとアボカドのピザ （トマトソース） |
 |
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<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>