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. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  2. HR Navigation Responsive Menu
  3. Responsive Elements
  4. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

  5. How satisfied are you? Slider
  6. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. 有栖川公園
  2. グーディオ オーガニックチョコレート(ミント)
  3. チキンバターマサラとシュリンプバターマサラ
  4. 恵比寿のダ・ミケーレのピザ
  5. ハムエッグホットサンドとドリップコーヒー

アーカイブ

PAGE TOP