ポップアップしたLightbox内にサムネイルも表示可能
なjQueryプラグイン・ppGalleryのご紹介です。Lightbox
系のjQueryプラグインの大半は1つずつ見ていくか、
一旦ポップアップを閉じてからもう一度開く必要があり
ましたが、ppGalleryは一回開けばあとはサムネイルで
好きな画像に飛べるのでLightboxスクリプトの中でも
イメージギャラリーに向いてそうです。
さて、今日は8月6日「ヒロシマ」の日ですね。1945年の今日の8時15分に原爆が投下されました。不幸にしてお亡くなりになられた方々のご冥福をお祈りすると共に、ご遺族の方々に対して心よりお悔やみを申し上げます。
現在、上記のようにGoogleストリートビューで原爆ドームの外と内を見ることが出来るようになっているようですのでチェックしてみてください。
では本題に戻ります。「Lightbox内にサムネイルも表示」ってなんだか表現おかしい気もしますけど語彙がないのでご了承下さい。
あまり見かけないタイプなので覚えておくといいかもしれません。
ppGallery
こんな感じでポップアップして表示された画像と一緒に他の画像のサムネイルも表示されるのであまりギャラリーとして機能しなかった従来のLightboxスクリプトのジレンマを解消出来るような出来無いような（どっちやんねん
あまりLightboxをギャラリーとして利用する方も少なそうですが、これはこれで有りかなと思います。
画像のサイズが異なる場合でもちゃんと広がってくれます。
コード
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="ppgallery/js/ppgallery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').ppGallery();
});
</script>本体とjQueryUI、プラグインを読み込んでセレクタを指定します。
マークアップ
<ul id="gallery"> <li><a href="images/l_01.jpg"><img src="images/s_01.jpg"></a></li> <li><a href="images/l_02.jpg"><img src="images/s_02.jpg"></a></li> <li><a href="images/l_03.jpg"><img src="images/s_03.jpg"></a></li> <li><a href="images/l_04.jpg"><img src="images/s_04.jpg"></a></li> <li><a href="images/l_05.jpg"><img src="images/s_05.jpg"></a></li> </ul>
シンプルですな・・・
以下で、デモの確認とスクリプトのダウンロードが可能です。