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になります。

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

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

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

Chocolatレスポンシブ対応のシンプルなLightbox風のjQueryプラグイン「Chocolat」前のページ

サイドからスライド開閉するレスポンシブメニューのjQueryプラグイン「Material Menu」次のページ

関連記事

  1. no-image

    JavaScript

    円形に飛び出すメニューを実装できる「ggExpandableOptions」

    ggExpandableOptionsは円形に飛び出すメニューを実装で…

  2. JavaScript

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  3. Swipe-Li

    JavaScript

    スマホ操作に最適!左右のスワイプで有効・無効を選べるjQueryプラグイン「Swipe-Li」

    Swipe-LiというjQueryプラグインを使えば、左右のスワイプで…

  4. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  5. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

  6. Dialogify

    JavaScript

    カスタマイズできるダイアログ・ライトボックスを作成できる「Dialogify」

    Dialogifyはカスタマイズできるダイアログやライトボックスなどを…

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP