iPhoneやiPadにも対応した、モニター
サイズに自動的に合わせて拡大表示
してくれるjQueryプラグイン、Touch-
Galleryのご紹介です。Lightbox系の
スクリプトは沢山ありますが、こちらも
一つの選択肢として思えておくといつか
役に立つかも、と思ってエントリー。

PCは勿論、iPhoneやiPadでも、そのモニターサイズの幅に合わせてLightbox風にフルスクリーン表示してくれます。特に設定も不要なのは楽で良い感じ。というか、iPhoneやiPad向けに作られたっぽいですね。

Touch-Gallery

gallery
↑ モニターのサイズに自動で合わせて拡大表示してくれるjQueryプラグインです。

lightbox01
↑ PCで見るとこんな感じ。基本的には普通のLightbox系の拡大表示です。

lightbox02
↑ iPhoneで見てもモニターサイズに合わせて拡大表示します。

lightbox03
↑ 横にしても自動的に横幅に合わせてくれます。

マークアップ

マークアップがシンプルで素敵ですね。以下のような感じでOKみたい。

<div id="gallery">
<a href="image1.jpg">
<img src="thumb1.jpg" />
</a>
<a href="image2.jpg">
<img src="thumb2.jpg" />
</a>
<a href="image3.jpg">
<img src="thumb3.jpg" />
</a>
</div>

この場合はオプション設定をします。↓

<script>
$('#gallery a').touchGallery();
</script>

以下よりDLとデモの確認が可能です。

Touch-Gallery