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. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  2. Optiscroll

    JavaScript

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

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

  3. cubeTransition.js

    JavaScript

    3Dキューブのようなスライダーを実装できる「cubeTransition.js」

    cubeTransition.jsは、CSS 3DトランスフォームとC…

  4. JavaScript

    スクロールバーにあと何分で読めるかを表示してくれるjQueryプラグイン「jQuery Readin…

    とてもシンプルですが何気に便利そうだったので使ってみました。長文記事を…

  5. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  6. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

最近の記事

  1. 濃いアーモンドミルク
  2. COMOLI ベタシャンプルオーバーシャツ
  3. ユニクロ エアリズム マイクロメッシュVネックT(半袖)
  4. ライオン システマ 超コンパクト ふつう
  5. タリーズ ハムチーズ&サラダサンド

アーカイブ

PAGE TOP