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>