no-image

JavaScript

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

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

Lightbox

デモ

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

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

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

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

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

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

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

関連記事

  1. Toolgif

    JavaScript

    GIFアニメーションによるツールチップを実装できる「Toolgif」

    ToolgifはGIFアニメーションを活用したツールチップを実装するこ…

  2. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

  3. jQuery.GI.TheWall.js
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのif文を使ってタグやクラス名によって条件分岐するやり方

    jQueryで普通にif文を使った条件分岐のやり方です。指定したタグや…

  5. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  6. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP