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. Woco Accordion jQuery plugin
  2. jQuery Tabs with Content Overlays
  3. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  4. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  5. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  6. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

最近の記事

  1. cheero USB-C PD Charger 60W
  2. DY-S01
  3. OWL-QI10W04
  4. BQ-CC87L

アーカイブ

PAGE TOP