クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」

クリック時に画像のキャプションなどを表示させるケースもあるのではないでしょうか。
その際にはjQueryプラグインのPurplecoat.jsを利用すると、オーバーレイさせながらオシャレにテキストを表示させられます。
クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」サンプル

使用方法
Purplecoat.jsからファイルをダウンロード。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="purplecoat.js"></script>

あとは対象の画像とボタンを記述します。
<img src="画像パス"
data-purplecoat="foo"
data-purplecoat-label="表示するテキスト"
>

ボタン側は下記のようにします。
<button
data-purplecoat-toggle="foo"
data-purplecoat-color="rgba(63, 159, 252, 0.8)"
>Click</button>

data-purplecoat-toggleは画像に記載したdata-purplecoatと同じにする必要があります。
また、data-purplecoat-colorはオーバーレイの色となりますので、適宜変更してください。

クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」サンプル

sponsors

「クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」」をシェアする

記事作成:
記事URL:

TOP > > > クリックすると画像にテキストをオーバーレイさせられるjQueryプラグイン「purplecoat.js」