• かちびと.net

    Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGalleryのご紹介です。表現合ってるのかよくわかりませんがw

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

Lightbox内にサムネイルも表示出来るイメージギャラリー系jQueryプラグイン・ppGallery

スポンサーリンク

ポップアップした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>

シンプルですな・・・

以下で、デモの確認とスクリプトのダウンロードが可能です。

ppGallery

URL :
TRB :

Comments & Trackbacks (3)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services