HOME > 制作 > Javascript > 画像をマウスオーバーでキャプション表示するjQueryプラグイン「Mosaic」！

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

Javascript

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

<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>

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

<script type="text/javascript">  
	jQuery(function($){
		$('.bar').mosaic({
			animation : 'slide'
		});
	});    
</script>

jQuery(function($){

$('.bar').mosaic({

animation : 'slide'

});

</script>

html部分を記述します。

<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>

<p>キャプション</p>

</div>

</a>

</div>

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

<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>