• かちびと.net

    iPhoneやiPadに対応した、モニターサイズに合わせて拡大表示するLightbox風jQueryプラグインのご紹介。自動でモニターサイズに合わせてくれるのとマークアップがシンプルなのが特徴です。

    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

iPhoneやiPadにも対応・モニターサイズに合わせて拡大表示するLightbox風jQueryプラグイン

スポンサーリンク

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

URL :
TRB :

Comments & Trackbacks (3)

  1. free antivirus download

    great…

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services