Image Lightbox

JavaScript

レスポンシブ&タッチフレンドリーなギャラリーのjQueryプラグイン「Image Lightbox」

Image LightboxというjQueryプラグインを使えば、レスポンシブでタッチフレンドリーなイメージギャラリーを実装することができます。ミニマルなデザインがとても素敵で、圧縮版ファイルは4KBと軽量なところも嬉しいですね。

[ads_center]

Image Lightboxの使い方

実際のデモはミニマルなデザインになっていてサムネイル画像をクリックすると画像が拡大します。

Image Lightbox

このように拡大画像が表示されます。

Image Lightbox

レスポンシブになっているのでブラウザの横幅を変更してもそれに合わせて最適化されます。スマホやタブレットでもうまくギャラリーを見せたい時なんかに活用してみたいですね。

使い方としては、まず画像を以下のようにマークアップしていきます。

<img src="picture.jpg" id="imagelightbox" />

CSSを少しだけ追加。

#imagelightbox {
    position: fixed;
    z-index: 9999;
}

jQuery本体とプラグインファイルを読み込んでImage Lightboxを呼び出せばOKです。

<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$(function() {
    $('a').imageLightbox();
});
</script>

オプションも用意されているので気になる方は是非チェックしてみて下さい。

Image Lightbox

関連記事

  1. Sticky Multi Header Scroll
  2. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  3. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  4. ScrollBooster

    JavaScript

    ドラッグしながらスクロールするライブラリ「ScrollBooster」

    ScrollBoosterはドラッグしながらスクロールする機能を実装で…

  5. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  6. Smooth Anchor Scrolling

    JavaScript

    ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

    ページ内リンクをスムーズにスクロールできる「Smooth Anchor…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP