no-image

JavaScript

プレーンなJavaScriptによるレスポンシブなLightbox「jsOnlyLightbox」

jsOnlyLightboxは、jQueryなどを必要としないプレーンなJavaScriptによるレスポンシブなLightboxを実装することができます。圧縮版で3KBほどと軽量ながらも、カスタマイズ性にも優れています。

キャプション付けやグループにすることも可能

デモ

デモページにはいくつかのサンプルが設置されています。サムネイル画像をクリックすると、大きい画像が画面中央に表示される仕組みです。大きい画像とともに背景にはオーバーレイがかかり、画像に集中しやすくなります。

普通に画像が立ち上がるものから、画像が読み込まれるまでローディングアニメーションが表示されるもの、キャプション付きのもの、グループになっているものなど、いろいろなタイプのLightboxがあります。

data属性を利用してキャプションを付けたりグループとしてまとめたりといったことが可能です。

また、オプションもたくさん用意されています。主なオプションは、boxId、dimensions、captions、prevImg、nextImg、hideCloseBtn、closeOnClick、loadingAnimation、animElCount、preload、carousel、animation、nextOnClick、responsive、maxImgSize、keyControlなどがあります。そのほか、コールバック関数を設定することもできます。

レスポンシブなので、PCからスマホやタブレットまで幅広いデバイスで快適に閲覧できるのがうれしいですね。jQueryなども必要とせず、JavaScript単体で実装できる軽量性の高さも魅力的です。

jsOnlyLightbox

coolHueクールなグラデーションがたくさん用意されたWebサイト「coolHue」前のページ

レスポンシブなマルチレベルのナビゲーションを実装できる「Ace Responsive Menu」次のページAce Responsive Menu

関連記事

  1. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  2. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  3. Toast

    JavaScript

    アニメーション付きでスタッキングしていくメッセージ通知「Toast」

    Toastはアニメーション付きのメッセージ通知を表示することができるj…

  4. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  5. A simple jQuery Accordion with unlimited nesting

    JavaScript

    シンプルなアコーディオンを実装する「A simple jQuery Accordion with u…

    シンプルで見やすいアコーディオンを実装することができる「A simpl…

  6. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP