Ion Zoom

JavaScript

シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」をご紹介します。サムネイル画像をクリックするとその場で画像が拡大します。この手のプラグインは色々あるのでこちらも候補の一つとして覚えておきたいですね。iPhoneでも確認してみたところちゃんと動作しました。ということで以下、使い方です。

[ads_center]

使い方

Ion Zoom

このように見たい画像を拡大することができます。

使い方はとても簡単です。独立したギャラリーを実装する場合は以下のようにマークアップします。

<a href="画像パス1" class="gallery_1"><img src="画像パス1" alt="" /></a>
<a href="画像パス2" class="gallery_1"><img src="画像パス2" alt="" /></a>
<a href="画像パス3" class="gallery_1"><img src="画像パス3" alt="" /></a>
・・・略・・・

jQueryとプラグインを読み込んだ状態でギャラリーを初期化します。

$(".gallery_1").ionZoom();

コントロールを無効にする場合はvisibleControlsをfalseに指定します。

$(".gallery_1").ionZoom({
    visibleControls: false
});

jQuery 1.9+、ブラウザはChrome、Firefox、Opera、Safari、IE(8.0+)になります。また、iPhoneやiPadなどのタッチスクリーンデバイスでも動作します。

ライセンスはMITライセンスとのこと。ダウンロードや詳細は以下からどうぞ。

iPhoneのアラームを無音でバイブや光のみで知らせてくれる便利アプリ「サイレントタイマー」前のページ

スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Reading Time」次のページ

最近の記事

  1. ホワイトチョコマカダミアドーナツ
  2. エッグペペ
  3. ダークチョコレート
  4. 朝のコーヒー
  5. ザンビア
PAGE TOP