こんにちは。
今回は画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」！です。
jQueryプラグイン「Mosaic」を使うとキャプションを表示できるだけでなく、フェードやスライドして表示する事ができます。
画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」！
Mosaic – Sliding Boxes and Captions jQuery Plugin
http://buildinternet.com/project/mosaic/
まずは上記の公式サイトの左カラムの「See Demo」のボタンをクリックしてデモをご覧下さい！
jQueryプラグイン「Mosaic」をダウンロードしてみよう！
上記の公式サイトの左カラムの「Download」のボタンをクリックしてダウンロードします。
jQueryプラグイン「Mosaic」を設置してみよう！
先程、ダウンロードしたファイルを設置していきます。
mosaic.cssとjQuery本体とmosaic.1.0.1.min.jsをhead内に読み込みます。
1 2 3 | <link rel="stylesheet" href="css/mosaic.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/mosaic.1.0.1.min.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 6 7 | <script type="text/javascript"> jQuery(function($){ $('.bar').mosaic({ animation : 'slide' }); }); </script> |
html部分を記述します。
1 2 3 4 5 6 7 8 9 | <div class="mosaic-block bar"> <a href="test.html" target="_blank" class="mosaic-overlay"> <div class="details"> <h4>タイトル</h4> <p>キャプション</p> </div> </a> <div class="mosaic-backdrop"><img src="img/test.jpg"/></div> </div> |
jQueryプラグイン「Mosaic」オプション
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> jQuery(function($){ $('.bar').mosaic({ animation : 'fade', //アニメーション効果 fade or slide speed : 150, //アニメーションのスピード opacity : 1, //不透明度の設定 アニメーション効果をfadeに設定した時にだけ有効 preload : 1, //ページロード完了後にオーバーレイを非表示 anchor_x : 'bottom', //マウスオーバー時のキャプション位置 top or bottom anchor_y : 'left', //マウスオーバー時のキャプション位置 left or right hover_x : '0px', //anchor_xからのマージン hover_y : '0px' //anchor_yからのマージン }); }); </script> |
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
簡単にアニメーション効果で表示できるのはうれしいですね！
以上で画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」！でした。
