昨今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日
▼インライン型LightBoxを実現するJavaScript「jQuery.popeye」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事:画像とキャプションをスムーズに表示するギャラリーJavaScript「s3Slider」
次の記事:フォームの入力文字数をチェックするJavaScript「Maxlength Plugin」


大学卒業後、某PR会社にてPR誌の取材・編集・デザインからPRコンサルティング、調査分析まで幅広い業務に携わる。業務の合間合間にWEB制作に関する技術を習得。
2007年6月から当サイト「skuare.net」を開始。その後、ホームページ制作会社に転職し、WEBサイト制作に本格的に従事し、CMS、JavaScriptに無駄に突っ込むディレクターとして活動中。
もし、もうちょっと詳細を見たかったら・・・・こちら >>
