no-image

JavaScript

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

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

Lightbox

デモ

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

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

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

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

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

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

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

関連記事

  1. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  2. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  3. Scrolla

    JavaScript

    スクロール時にアニメーションするjQueryプラグイン「Scrolla」

    Scrollaは上下スクロールしたときにアニメーションするjQuery…

  4. Text Effects

    JavaScript

    テキストがカシャカシャ切り替わって表示するjQueryプラグイン「Text Effects」

    Text EffectsというjQueryプラグインを使えば、テキスト…

  5. Animate Transition
  6. Flipster

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイン「Flipster」

    レスポンシブにも対応しているシンプルなカルーセルを実装できるjQuer…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP