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ライセンスとのこと。ダウンロードや詳細は以下からどうぞ。

関連記事

  1. Tip

    JavaScript

    シンプルなUIで使いやすいツールチップ実装「Tip」

    TipはシンプルなUIによる使いやすいツールチップを実装することができ…

  2. megamenu.js

    JavaScript

    レスポンシブでスマートなメガメニューを実装できる「megamenu.js」

    megamenu.jsはjQueryを使ったレスポンシブでスマートなメ…

  3. Smooth Scroll behavior polyfill
  4. jQuery UI Month Picker Plugin
  5. Zoom SlideShow

    JavaScript

    カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」

    Zoom SlideShowは、カルーセルによるスライドショーとズーム…

コメント

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

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

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP