画像をクリックするとニュルッとアニメーションして画像が拡大されるLightBoxというのがありますが、その機能とイメージギャラリーを組み合わせたようなイメージギャラリーが作れるjQueryプラグインです。

サンプルをみてもらったら分かると思います。

→ サンプルページ

あまりスペースのないところにイメージギャラリーを置きたかったり、インパクトのある画像の見せ方をしたいときに使えそうです。


まずは、「popeye – an inline lightbox alternative」を一式をダウンロードします。

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.popeye-2.1.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var options1 = {
}
var options2 = {
caption:    false,
navigation: ‘permanent’,
direction:  ‘left’
}
var options3 = {
caption:    ‘permanent’,
opacity:    1
}

$(‘#ppy1’).popeye(options1);
$(‘#ppy2’).popeye(options2);
$(‘#ppy3’).popeye(options3);
});

</script>

ppy1~3はサンプルページにあったExample1~3のオプションにそれぞれ対応しています。

そしてbody部の入れたいところに
<div id=”ppy1″>  // ppy1~3
<ul>
<li>
<a href=”拡大した時の画像Aのパス1″>
<img src=”拡大前の画像Aのパス1″ alt=”” />
</a>
<span class=”ppy-extcaption”>
<strong>ここに文字が入れられます。</strong>
</span>
</li>
<li>
<a href=”拡大した時の画像Bのパス2″>
<img src=”拡大前の画像Bのパス2″ alt=”” />
</a>
<span class=”ppy-extcaption”>
<strong>ここに文字2が入れられます。</strong>
</span>
</li>
<!– 以下画像分繰り返し –>
</ul>
</div>

本家のDEMOはこちらです。(英文) → Popeye

あくまでご参考までにのサンプルページのソースは以下のとおり。みにくいソースでごめんなんさい。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>ライトボックス風な雰囲気のスライドイメージギャラリー 『jQuery.popeye 2.1』</title>

<link rel=”stylesheet” type=”text/css” href=”css/popeye/jquery.popeye.css” media=”screen” />
<link rel=”stylesheet” type=”text/css” href=”css/popeye/jquery.popeye.style.css” media=”screen” />

<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/jquery.popeye-2.1.js”></script>

<script type=”text/javascript”>

$(document).ready(function () {
var options1 = {
}
var options2 = {
caption:    false,
navigation: ‘permanent’,
direction:  ‘left’
}
var options3 = {
caption:    ‘permanent’,
opacity:    1
}

$(‘#ppy1’).popeye(options1);
$(‘#ppy2’).popeye(options2);
$(‘#ppy3’).popeye(options3);
});

</script>

</head>
<body>
<div id=”page-margins”>
<div id=”header”>
<h1>ライトボックス風な雰囲気のスライドイメージギャラリー<br />
『jQuery.popeye 2.1』</h1>
<p>&nbsp;</p>
</div>

<div>

<div id=”ppy1″>
<ul>
<li>
<a href=”http://farm4.static.flickr.com/3630/3464722996_29f881a6b1.jpg”>
<img src=”http://farm4.static.flickr.com/3630/3464722996_29f881a6b1_m.jpg” alt=”” />
</a>
<span>
<strong>ここに文字が入れられます。</strong><br />shot by flickr member Jane Rahman<br />
<a href=”http://www.flickr.com/photos/buenosaurus/with/3427676803/”>View on flickr.com</a>
</span>
</li>
<li>
<a href=”http://farm4.static.flickr.com/3527/3458644464_860af48f30.jpg”>
<img src=”http://farm4.static.flickr.com/3527/3458644464_860af48f30_m.jpg” alt=”” />
</a>
<span>
<strong>ここに文字が入れられます。</strong><br />shot by flickr memberJane Rahman<br />
<a href=”http://www.flickr.com/photos/buenosaurus/with/3427676803/”>View on flickr.com</a>
</span>
</li>
<li>
<a href=”http://farm4.static.flickr.com/3547/3457130365_7bf16a37f7.jpg”>
<img src=”http://farm4.static.flickr.com/3547/3457130365_7bf16a37f7_m.jpg” alt=”” />
</a>
<span>
<strong>Daipeem</strong><br />shot by flickr member Jane Rahman<br />
<a href=”http://www.flickr.com/photos/buenosaurus/with/3427676803/”>View on flickr.com</a>
</span>
</li>
<li>
<a href=”pic/sample_b.jpg”>
<img src=”pic/sample_s.jpg” alt=”” width=”240″ height=”160″ border=”0″ />                    </a>
<span>
<strong>Sample</strong><br />
this was in one of the ballrooms inside the bellagio that we snuck into.
</span>
</li>

</ul>
<div>
<div>
<div>
<a title=”Previous image”>Previous image</a>
<a title=”Enlarge”>Enlarge</a>
<a title=”Close”>Close</a>
<a title=”Next image”>Next image</a>
</div>
</div>
</div>
<div>
<div>
Image <strong></strong> of <strong></strong>
</div>
<span></span>
</div>
</div>
<h2>Example1</h2>
こんな感じになります。
<br />
<br />
これはスタンダードの状態です。<br />
<br />
画像にカーソルを持って行くと、矢印とイメージを拡大するアイコンが表示されます。<br />
</div>

<!– [example2] –>
<div>
<hr />
<h2>Example 2</h2>
<div id=”ppy2″>
<ul>
<li><a href=”http://farm4.static.flickr.com/3630/3464722996_29f881a6b1.jpg”>
<img src=”http://farm4.static.flickr.com/3630/3464722996_29f881a6b1_m.jpg” alt=”” />
</a>
</li>
<li><a href=”http://farm4.static.flickr.com/3527/3458644464_860af48f30.jpg”>
<img src=”http://farm4.static.flickr.com/3527/3458644464_860af48f30_m.jpg” alt=”” />
</a>
</li>
<li><a href=”http://farm4.static.flickr.com/3547/3457130365_7bf16a37f7.jpg”>
<img src=”http://farm4.static.flickr.com/3547/3457130365_7bf16a37f7_m.jpg” alt=”” />
</a>
</li>
</ul>
<div>
<div>
<div>
<strong></strong> / <strong></strong>
</div>
</div>
<div>
<div>
<a title=”Next image”>Next image</a>
<a title=”Previous image”>Previous image</a>
</div>
</div>
</div>
</div>
<p>オプションを変更するとこんな感じ。<br />
画像をクリックすることで画像が拡大されます。<br />
<br />
</p>
<p>
</p>
</div>

<!– [example3]  –>
<div>
<div id=”ppy3″>
<ul>
<li><a href=”http://farm4.static.flickr.com/3142/3053892214_390c0365df.jpg”><img src=”http://farm4.static.flickr.com/3142/3053892214_390c0365df_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3014/3053902638_7871e32230.jpg”><img src=”http://farm4.static.flickr.com/3014/3053902638_7871e32230_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d.jpg”><img src=”http://farm4.static.flickr.com/3136/3053075339_ca3f303a6d_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3234/3053054359_090927b527.jpg”><img src=”http://farm4.static.flickr.com/3234/3053054359_090927b527_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3161/3053878060_16a1ed4786.jpg”><img src=”http://farm4.static.flickr.com/3161/3053878060_16a1ed4786_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3247/3053897646_df5b74c794.jpg”><img src=”http://farm4.static.flickr.com/3247/3053897646_df5b74c794_m.jpg” alt=”” /></a></li>
<li><a href=”http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e.jpg”><img src=”http://farm4.static.flickr.com/3225/3053039525_2d3ef0c58e_m.jpg” alt=”” /></a></li>
</ul>
<div>
<div>
<div>
<div>
<a title=”Previous image”>Previous image</a>
<a title=”Play Slideshow”>Play Slideshow</a>
<a title=”Stop Slideshow”>Stop Slideshow</a>
<a title=”Next image”>Next image</a>
</div>
</div>
<div>
<strong></strong> / <strong></strong>
</div>
</div>
<div>
<span></span>
</div>
</div>
</div>

<hr />
<h2><br />
Example 3</h2>
<p>スライドショーとして自動で画像を流すことも出来ます。<br />
PLAY/一時停止ボタンを押すと始まります。画像をクリックすると拡大されます。<br />
<br />
</p>

</div>

</body>
</html>

この記事と関連してると思われる記事: