画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」!

2015/02/14

こんにちは。
今回は画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」!です。

jQueryプラグイン「Mosaic」を使うとキャプションを表示できるだけでなく、フェードやスライドして表示する事ができます。

画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」!

Mosaic – Sliding Boxes and Captions jQuery Plugin

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内に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。

 

jQueryプラグイン「Mosaic」オプション

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。簡単にアニメーション効果で表示できるのはうれしいですね!
以上で画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」!でした。

topへ戻る