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. マリーゴールドのゴム手袋(バスルーム)
  2. クリスマスエスプレッソロースト
  3. シーザーチキン 石窯カンパーニュ
  4. スキャルプ&ヘア リファイニング トリートメント オイル R
  5. ポーレックスの手動ミル
PAGE TOP