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

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでマウスオーバーした時に要素を全体的に拡大するやつを作ってみる

    すごくどうでもいい内容なんですが、ちょっとやってみたかったので素人なが…

  2. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  3. ArtDesignSlider

    JavaScript

    レスポンシブで豊富なエフェクトのイメージスライダー「ArtDesignSlider」

    ArtDesignSliderは豊富なエフェクトでレスポンシブにも対応…

  4. Ace Responsive Menu
  5. Smooth Scroll behavior polyfill
  6. jQuery Tooltip Basic

    JavaScript

    カスタマイズしやすいツールチップ実装「jQuery Tooltip Basic」

    jQuery Tooltip Basicは、カスタマイズしやすいツール…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP