skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

インライン型LightBoxを実現するJavaScript「jQuery.popeye」

｜ ｜ ｜ ｜ ｜ ｜ ｜

昨今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日

前の記事：画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」
次の記事：フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」