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. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  2. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

  3. Woco Accordion jQuery plugin
  4. no-image

    JavaScript

    シンプル・軽量なjQueryイメージビューア「WimmViewer」

    WimmViewerはシンプルで軽量なイメージビューアを実装できるjQ…

  5. Kontext

    JavaScript

    iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

    KontextというJavaScriptを使えばiOSの画面切り替えの…

  6. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP