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. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

  2. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  3. quick-select

    JavaScript

    素早く簡単に選択できるセレクトボックス「quick-select」

    quick-selectは素早く簡単に選択可能なセレクトボックスを実装…

  4. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  5. Letter Drop

    JavaScript

    雨のように文字が落ちてくるアニメーションのjQueryプラグイン「Letter Drop」

    Letter DropというjQueryプラグインを使えば、雨のように…

  6. jQuery Seat Charts

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP