jQuery Captify Plugin | 設置サンプル

アボカド刺

ベーコンとアボカドのピザ
（トマトソース）

ハニートースト	もっと探す
@アボガドダイニング Platinum Lounge

アボガドディップ

もっと探す

よくわからないけどちゃんとアボガド入りです！クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。

設置サンプルのソース

<!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" />  <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>  <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>  <div class="cf">  <img id="Image1" src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" width="240" height="180" class="captionImage1" alt="アボカドシーザーサラダ" />  <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>  <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">  <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>  <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>  <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>  </div> </body> </html>