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. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  2. Bricks.js

    JavaScript

    超高速なMasonryレイアウトを実装できる「Bricks.js」

    Bricks.jsは、固定した幅で配置する画像などの要素をすばやく配置…

  3. fineScroll bar

    JavaScript

    簡単に使えるスクロールバー実装「fineScroll bar」

    fineScroll barは簡単に使えるスクロールバーを実装できるj…

  4. Responsive jQuery Pop Up Gallery
  5. Add To Cart Interaction

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP