[JS]フレキシブルな実装に対応した、画像にキャプションを表示するスクリプト -jCaption
Post on:2009年3月5日
先日紹介した「オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify」と同等の機能をフレキシブルな実装に対応させたスクリプト「jCaption」を紹介します。
下記は、画像の下に配置したテキストを画像の上にキャプションとしてアニメーションでスライド表示させたものです。
jCaption: jQuery Image Captions with Customizable Markup, Style and Animation
demo
jCaptionのデフォルトの設定では、img要素のaltのテキストを利用して表示されるようになっています。
設定を変更することで、img要素の別の属性(titleなど)や画像とは関係無い別の要素(pなど)からのテキスト取得や、適用する要素やclass, idの指定ができます。
demoページではaltのみのデモですが、img要素のtitleのテキストを利用することも可能です。
左:titleのテキスト、右:altのテキスト
1 2 3 4 5 6 7 8 |
<textarea name="code" class="js" cols="60" rows="5"> $('#demo2 img').jcaption({ imageAttr: 'title', }); $('#demo3 img').jcaption({ imageAttr: 'alt', }); </textarea> |
titleとaltを同居させないと思いますが、異なるデザインを同一ページに表示させることも可能です。
sponsors