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. Block Slide

    JavaScript

    jQueryプラグインで印象的なエフェクトで魅せるモーダルウィンドウ「Block Slide」

    Block SlideというjQueryプラグインを使えば印象的なエフ…

  2. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  3. 3D Portfolio Template

    JavaScript

    立体的に回転するテンプレート「3D Portfolio Template」

    滑らかに、立体的に回転するテンプレートを実装することができる「3D P…

  4. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  5. Panoramix Image

    JavaScript

    左右に移動できるパノラマ画像を表示させれる「Panoramix Image」

    Panoramix Imageは、左右に移動できるパノラマ画像を表示さ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP