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

no-imageスクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」前のページ

異なる要素の高さを揃えてくれる「jQuery Equal Height」次のページjQuery Equal Height

関連記事

  1. JQuery Portfolio
  2. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  3. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  4. Foxholder
  5. ArtDesignSlider

    JavaScript

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

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

  6. Maximum Characters limit exceeded warning

最近の記事

  1. Anker PowerWave Pad Alloy
  2. Anker Bolder LC30
  3. BG-R10

アーカイブ

PAGE TOP