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. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  2. jquery.confirmDialog
  3. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  4. Ace Responsive Menu
  5. Tabslet

    JavaScript

    jQueryプラグインでタブ機能が実装できる「Tabslet」

    TabsletというjQueryプラグインを使えばWebサイトにタブ機…

  6. linkunderline

    JavaScript

    テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

    linkunderlineは、テキストリンクにアンダーラインを引くアニ…

コメント

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

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

最近の記事

  1. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  2. ペットボトルホルスター

アーカイブ

PAGE TOP