インライン型LightBoxを実現するJavaScript「jQuery.popeye」
[ 2分で読めて簡単導入できます]
昨今LightBoxスクリプトが広まり、さまざまな場所でオーバーレイが登場するのに辟易している人も多いでしょう。
jQuery.popeyeはJavaScriptライブラリ「jQuery」を使用し、ユーザーの視線を妨げない表示方法が可能です。
使用方法
jQuery.popeyeから、jquery.popeye-0.2.1.js、jquery.easing.1.3.jsや画像ファイルを、jQueryからjquery.jsをダウロードします。
<link rel="stylesheet" type="text/css" href="jquery.popeye.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styling.css" media="screen" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.popeye-0.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#popeye1').popeye();
});
</script>
まず、上記を記述し、画像を以下のように記述します。
<div id="popeye1" class="popeye">
<ul>
<!-- 画像1個目 -->
<li><a href="大きい画像へのパス"><img src="サムネイル画像へのパス" alt="キャプション" /></a></li>
<!-- 画像1個目ここまで -->
画像分繰り返し
</ul>
</div>
これで、完成です。
なおオプションには以下のような指定があります。
var options = {
easing: 'easeInOutCirc', //easingプラグインの値
direction: 'left' //表示方向
}
$('#popeye1').popeye(options);
インライン型LightBoxを実現するJavaScript「jQuery.popeye」サンプル
記事作成：2009年01月16日
