CaptionerJs

JavaScript

画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

CaptionerJsは画像に開閉できるキャプションを実装することができるjQueryプラグインです。画像に表示されているキャプションをクリックするとスライドダウンしてタイトルのみを残して非表示になります。逆に今度はタイトルをクリックすると詳細がスライドアップで表示されます。

[ads_center]

CaptionerJsの使い方

CaptionerJsのデモやダウンロードは以下からどうぞ。

CaptionerJs

Captioner.Js

使い方はjQuery本体とプラグインを読み込んだ状態で以下のように画像を記述します。シンプルで分かりやすいですね。

<img
    src="sample.jpg"
    role="caption"
    title="タイトル"
    alt="サンプルテキスト サンプルテキスト サンプルテキスト"
 />

キャプションは、オープン・クローズさせる以外にも固定することもできます。その場合はオプションで以下を追加してあげればOKです。

data-captioner-type="stacked"

data-captioner-typeに設定できる値は、static、animated、classicになります。

画像に表示されるキャプションは、その画像に関する詳細情報を知るのにとても便利なわけですが、一方で画像をちゃんと見たい時にはキャプションを隠したくなりますよね。

なので、そういったことを解決したい時には、このプラグインを活用するのがよさそうです。

画像にキャプションを入れたいし、画像そのものもしっかりと見て欲しいといった時には、とても役立ちますね。

関連記事

  1. jQuery Autocompleter

    JavaScript

    カスタマイズ性に優れたサジェスト機能を実装できる「jQuery Autocompleter」

    jQuery Autocompleterはカスタマイズ性に優れたサジェ…

  2. jQuery Floating Social Share
  3. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  4. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

  5. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

  6. Segment

    JavaScript

    SVG pathをアニメーションさせる軽量のスクリプト「Segment」

    SegmentはSVG pathをアニメーションさせる軽量のスクリプト…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP