[JS]フレキシブルな実装に対応した、画像にキャプションを表示するスクリプト -jCaption

先日紹介した「オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify」と同等の機能をフレキシブルな実装に対応させたスクリプト「jCaption」を紹介します。

下記は、画像の下に配置したテキストを画像の上にキャプションとしてアニメーションでスライド表示させたものです。

サンプルのキャプチャ:その1

jCaption: jQuery Image Captions with Customizable Markup, Style and Animation
demo

jCaptionのデフォルトの設定では、img要素のaltのテキストを利用して表示されるようになっています。
設定を変更することで、img要素の別の属性(titleなど)や画像とは関係無い別の要素(pなど)からのテキスト取得や、適用する要素やclass, idの指定ができます。

demoページではaltのみのデモですが、img要素のtitleのテキストを利用することも可能です。

サンプルのキャプチャ:その2

左:titleのテキスト、右:altのテキスト

titleとaltを同居させないと思いますが、異なるデザインを同一ページに表示させることも可能です。

sponsors

top of page

©2018 coliss