jQuery-LightBox

JavaScript

軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイルフレンドリーなLightboxを実装することができるjQueryプラグインです。分かりやすくて操作がしやすい左右矢印ボタンや閉じるボタンを備えています。複雑な機能もなく、シンプルイズベストなLightbox風イメージギャラリーを取り入れたい人は要チェックです。

jQuery-LightBox

デモ

デモではサムネイル画像が全部で5枚並べられていて、各画像をクリックすると画像が拡大表示されます。背景にはオーバーレイがかかり画像を集中して楽しむことが可能です。また、前後の画像を切り替えられる左右矢印ボタンと右上にはクローズボタンが設置されています。

複雑な機能を求めてなく、必要最低限のシンプルな機能性を有したLightboxを実装したいと思っている人にはピッタリのjQueryプラグインといえますね。

また、jQuery-LightBoxはレスポンシブにも対応しているのでスマホやタブレットなどさまざまなデバイスからでも快適に閲覧することができます。試しにiPhoneでデモページを開いてみましたが、ちゃんと最適化されていました。スワイプなどには対応していませんが、左右矢印ボタンがスマホからだとわりと大きめに感じるので操作性も問題ないと感じました。

実装方法に関しても、特に難しい設定もなくすんなり実装できるのがいいですね。ちなみに、冒頭で紹介したデモページには実際のコードの記述例も記載されています。

jQuery-LightBox

iOS 11の「片手入力」機能iOS 11の「片手入力」機能がとても使いやすい前のページ

iOS 11でスクリーンショット撮影後に画像編集(加工)する機能次のページスクリーンショット撮影後に画像編集(加工)

関連記事

  1. JavaScript

    リスト化したテキストを円になるように配置してくれるjQueryプラグイン「Extremes」

    ちょっと面白そうだったので使ってみました。リスト化した各テキストを円を…

  2. jQuery.GI.TheWall.js
  3. Schedule Template

    JavaScript

    シンプルなスケジュール表を実装する「Schedule Template」

    スッキリしたデザインのシンプルなスケジュールテンプレートを実装するため…

  4. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

  5. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

  6. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP