画像ギャラリー - マウスオーバーでタイトルがびよーんと表示「relocator」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーでタイトルがアニメ効果付きでびよーんと表示する画像ギャラリーを作成するプラグイン「relocator」を紹介します。
jQueryプラグイン「relocator」
このプラグインを使えば、画像をタイル目のように並べる画像ギャラリーを簡単に作成することができます。異なる画像サイズでもリサイズしてくれるので、楽ちんです。
また、画像にマウスポインターをもっていくとアニメ効果付きで画像タイトルが表示されます。
スポンサーリンク
デモの画像ギャラリーをご覧ください。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="relocatorのデモでーす。">
<title>relocator - jQueryプラグイン</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery.relocator.1.0.0.js"></script>
<script>
$(document).ready(function(){
$('#relocator').relocate({
title : false,
highlight : true,
direction : "bottom",
speed : 250,
});
});
</script>
</head>
<body>
<h1>relocatorのデモでーす。</h1>
<div class="relocator" id="relocator">
<ul>
<li><a href=""><img src="images/red.png" data-title="red" data-desc="赤だよ～"></a></li>
<li><a href=""><img src="images/orange.png" data-title="orange" data-desc="橙だよ～"></a></li>
<li><a href=""><img src="images/yellow.png" data-title="yellow" data-desc="黄だよ〜"></a></li>
<li><a href=""><img src="images/green.png" data-title="green" data-desc="緑だよ〜"></a></li>
<li><a href=""><img src="images/blue.png" data-title="blue" data-desc="青だよ〜"></a></li>
<li><a href=""><img src="images/indigo.png" data-title="indigo" data-desc="藍だよ〜"></a></li>
<li><a href=""><img src="images/purple.png" data-title="purple" data-desc="紫だよ〜"></a></li>
</ul>
</div>
</body>
</html>
jsファイルのダウンロード、その他のオプション詳細はこちらからどうぞ。
» relocator
スポンサーリンク