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. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  2. Simple button checks

    JavaScript

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

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

  3. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

  4. Magnific Popup

    JavaScript

    レスポンシブに対応したLightbox風のjQueryプラグイン「Magnific Popup」

    レスポンシブに対応したLightbox風のjQueryプラグイン「Ma…

  5. Jqx-Media-Slider

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP