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

シンプル・軽量・コンパクトなシェアボタンを実装できるjQueryプラグイン「Share Button」前のページ

レスポンシブ制作に役立つiPhone・iPad・Macの表示確認ツール「Respondr」次のページ

関連記事

  1. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  2. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  3. JavaScript

    円グラフ/折れ線グラフ/棒グラフを簡単に作れるjQueryプラグイン「Peity」

    個人的にかなり便利なプラグインを発見しました。円グラフ、折れ線グラフ、…

  4. Choice.js
  5. jQuery Section Navi Plugin
  6. jQuery touchSwipe Carousel

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP