no-image

JavaScript

レスポンシブ対応のシンプルなLightboxプラグイン

レスポンシブに対応したシンプルなLightboxプラグインを紹介します。画像クリックで拡大された画像を手軽に確認できます。複雑な機能やアニメーションなども特になく、サクッと拡大画像をチェックできるので、シンプルなLightboxを実装したい人にはピッタリです。

Lightbox

デモ

デモではサムネイル画像が1枚表示されていて、これをクリックすると拡大された画像が表示されます。背景は黒でオーバーレイされていて、中央に拡大画像が表示されます。

右上にはバツ印が付いていて、ここをクリックすると元のサムネイルの状態に戻ります。

またレスポンシブ対応なので、画面を縮小・拡大してもそれに合わせてサイズが変化するあたりもいいですね。スマホからのアクセスにも最適です。

複雑な機能やアニメーションなどもなく、サッと表示できるのでとても効率的なLightboxプラグインに仕上がっています。使い方もかなり簡単で手軽に実装できるはず。

というわけで、レスポンシブに対応したjQueryのLightboxプラグインの紹介でした。

no-imagejQueryとCSS3を使った縦型アコーディオン「Accordion-menu」前のページ

シンプルでピュアなCSSによるアラート実装「Alerts.css」次のページAlerts.css

関連記事

  1. no-image

    JavaScript

    多彩なコンテンツ表示やカスタマイズ性を有する「LC Lightbox」

    LC Lightboxは画像や動画など多彩なコンテンツ表示ができたり高…

  2. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  3. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

  4. Macy.js

    JavaScript

    軽量なグリッドレイアウトを実装できるJSライブラリ「Macy.js」

    Macy.jsは軽量なグリッドレイアウトを実装することができる便利なJ…

  5. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  6. JavaScript

    レスポンシブなテキストを実装できるjQueryプラグイン「Responsive Text」

    Responsive TextというjQueryプラグインを使えば、と…

最近の記事

  1. 生ハム&モッツァレラチーズ サラダラップ
  2. コガネムシ
  3. ショルダーハム&5種の野菜サンドイッチ
  4. ジョン・リーチ マグカップ
PAGE TOP