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. Slideout.js

    JavaScript

    軽量でタッチスライド対応のサイドメニュー・Slideout.js

    Slideout.jsは軽量でスマフォでのタッチスライドに対応したサイ…

  2. Bar Indicator

    JavaScript

    数値をインジケーターで見やすく表示できる「Bar Indicator」

    Bar Indicatorは数値をインジケーターで表示させることができ…

  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

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

    JavaScript

    jQueryでreplaceWithやreplaceAllを使って要素を置き換えてみる

    jQueryでreplaceWithやreplaceAllを使えば好き…

  6. photowall

    JavaScript

    Google画像検索のようにサムネイル画像をクリックするとスライド表示されるjQueryプラグイン「…

    Google画像検索のようなアニメーションを実装することができるjQu…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP