no-image

JavaScript

リッチキャプションを備えたイメージビューア「CaptionBox」

CaptionBoxは、リッチキャプションを備えた美しいイメージビューアを実装することができるjQueryプラグインです。カスタマイズ性も高く、レスポンシブにも対応しているのでスマホなどでも快適に閲覧可能です。キーボードやスワイプといった操作にも対応しているのがうれしいですね。

CaptionBox

デモ

デモでは画像が3枚並べられていて、任意の画像をクリックするとイメージビューアが立ち上がり、キャプション付きの画像が表示されます。画像が読み込まれるまでの間は、ローディングアニメーションが表示されます。

シンプルなレイアウトで、画像とキャプションがバランスよく表示されていてとても見やすいです。Exif情報もサポートされているみたいですね。画像に使われたカメラや撮影時のセッティングなどの情報を知りたいユーザーにとっては、何気にうれしい機能ですね。

左右には画像を切り替える矢印が設置されていて、ここをクリックするかもしくはキーボードの左右矢印キーからでも画像を切り替えることができます。モバイル版ではスワイプにも対応しているので、スマホからでも快適な操作性を実現します。

右上にあるバツ印をクリックすると、元のページに戻ります。

それから、CaptionBoxにはオプションもいろいろ用意されています。主なオプションは、imageSelector、showExif、mobileWidth、alterUrlFlag、alterUrlString、swipeNav、disableRightClick、scrollBackです。デフォルト値は、imageSelectorがcaptionBoxImage、showExifがtrue、mobileWidthが900、alterUrlFlagがtrue、alterUrlStringがimg、swipeNavがtrue、disableRightClickがfalse、scrollBackがtrueになります。

というわけで、リッチキャプションを備えたモバイルフレンドリーなイメージビューアを実装したいという人は、ぜひ「CaptionBox」を活用されてみてはいかがでしょうか。

CaptionBox

関連記事

  1. Pagination.js

    JavaScript

    シンプルでさまざまなカスタマイズが可能な「Pagination.js」

    Pagination.jsはシンプルでさまざまなカスタマイズが可能なペ…

  2. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  3. JavaScript

    色んなメニューやコンテンツをモーダルウィンドウで実装できるjQueryプラグイン「Pop Easy」…

    お洒落で可愛らしいjQueryプラグインを見つけたのでご紹介します。ロ…

  4. mmenu

    JavaScript

    スマホアプリのように横からスライドするメニューのjQueryプラグイン「mmenu」

    mmenuというjQueryプラグインを使えば、スマホアプリのように横…

  5. Woco Accordion jQuery plugin
  6. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

最近の記事

  1. 簡易アクセス
  2. SOUNDLINK MINI II Special Edition
  3. メリーストロベリーケーキフラペチーノ

アーカイブ

PAGE TOP