画像をホバーするとキャプションが表示する「jQuery Image Overlay Plugin」

写真の上にカーソルを乗せると写真の説明を表示してくれる「jQuery Image Overlay Plugin」を試してみたのでその使い方と注意点を挙げていきたいと思います。

FerretArmy.com jQuery Image Overlay Plugin

使い方

【1】サンプルソースファイルをダウンロード

【2】「jquery.js」、「ImageOverlay.css」、「jquery.ImageOverlay.js」を設置

【3】スクリプトを書く

$(function() {
    $("#myGallery").ImageOverlay({
        always_show_overlay: false, // 常にキャプションを表示する
        animate:true,               // キャプションを表示する際にアニメーションを使用
        border_color: '#666',       // 画像のボーダー色
        overlay_color: '#000',      // キャプションの背景色
        overlay_origin: 'bottom',   // キャプションの現れる方向
        overlay_speed: 'slow',   　 // アニメーション出現速度 
        overlay_speed_out: 'slow',  // アニメーション退場速度
        overlay_text_color: '#666' // テキスト色
    });
});

【4】idとclassを指定

<ul id="myGallery" class="image-overlay" >
  <li>
    <a href="#">
      <img alt="" src="画像のパス" width="" height="">
      <div class="caption">
        <h3>タイトル</h3>
        <p>キャプション</p>
      </div>
    </a>
  </li>
</ul>

注意点

画像が表示されない場合がある
ページを更新(F5)すると表示される場合もある
いくらリロードしても画像が表示されない場合はURLを再度入力し直すと表示される

プレビュー

↓別ウィンドウを開いて見る
jQuery Image Overlay Plugin

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>jQuery Image Overlay Plugin</title>
<link rel="stylesheet" href="ImageOverlay.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.ImageOverlay.js"></script>
<script>
<!--    
$(function() {
    $("#myGallery").ImageOverlay({
        always_show_overlay: false, // 常にキャプションを表示する
        animate:true,               // キャプションを表示する際にアニメーションを使用するかどうか
        border_color: '#666',       // 画像のボーダー色
        overlay_color: '#000',      // キャプションの背景色
        overlay_origin: 'bottom',   // キャプションの現れる方向
        overlay_speed: 'slow',   　 // アニメーション出現速度 
        overlay_speed_out: 'slow',  // アニメーション退場速度
        overlay_text_color: '#666' // テキスト色
    });
});
-->
</script>    
</head>
<body>
<div id="container">
<ul id="myGallery" class="image-overlay" >
  <li>
    <a href="#">
      <img alt="" src="http://jsrun.it/assets/x/y/V/0/xyV0t.jpg" width="400" height="290">
      <div class="caption">
        <h3>jQuery Image Overlay Plugin</h3>
        <p>画像をホバーするとキャプションが表示されます。</p>
      </div>
    </a>
  </li>
</ul>
<p>※画像が表示されない場合はリロードしてみてください。</p>
<p>※いくらリロードしても画像が表示されない場合はURLを再度入力し直すと表示されます。</p>
</div>    
</body>
</html>

CSS

@charset "utf-8";

* {
    margin:0;
    padding:0;
}

body {
    background-color:#eee;
	font-family:
        "ヒラギノ角ゴ Pro W3", 
        "Hiragino Kaku Gothic Pro", 
        "メイリオ", 
        Meiryo, 
        Osaka, 
        "ＭＳ Ｐゴシック", 
        "MS PGothic", 
        sans-serif；
}

#container {
    width:400px;
    margin:30px auto 0;
}

.image-overlay { list-style: none; text-align: left; }
.image-overlay li { display: inline; }
.image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; }
.image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; }

.image-overlay a
{
    margin:0 0 10px;
    float: left;
    background: #fff;
    border: solid 2px;
    overflow: hidden;
    position: relative;
}
.image-overlay img
{
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
}
.image-overlay .caption
{
    float: left;
    position: absolute;
    background-color: #000;
    width: 100%;
	cursor: pointer;
	/* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to
		longtime IE abuse of it, so opacity is not offically supported - use at your own risk. 
		To play it safe, disable overlay opacity in IE. */
    /* For Firefox/Opera/Safari/Chrome */
	opacity: .8;
    /* For IE 5-7 */
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    /* For IE 8 */
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}
.image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3,
.image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6
{
	margin: 10px 0 10px 10px;
    font-size: 20px;
    font-weight: bold;
    color:#fff;
}
.image-overlay p
{
	text-indent: 0;
	margin: 10px;
	font-size: 16px;
    color:#fff;
}