文字列の操作：
画像のaltに設定されている文字列をキャプションに
指定した<img>タグに設定されているaltの文字列を抜き出して、キャプションとして指定タグでNodeを追加する。
Node
<img>Nodeを指定 id値を文字列で指定してもよい
String
キャプションとして生成するタグ名を指定 大文字・小文字で指定可能
Number
<img>タグの前後どちらに追加するか指定 省略した場合は 1 (後ろに追加) となる
0 = 前に追加 ・ 1 = 後ろに追加
0 = 前に追加 ・ 1 = 後ろに追加
●必須引数 ●オプション引数(省略可能)
記述例
$captionFromAlt($id('photo1'), 'span')
$captionFromAlt('photo1', 'DIV', 0)
注意点
キャプションは指定タグに文字列を入れて追加するだけなので、表示についてはCSSで設定する。
動作サンプル
HTML :
<div id="sample1">
<img ・・・ alt="ピンクの花の写真">
</div>
Sass :
#sample1 {
& > div { //追加するキャプション用のスタイル
padding: 4px 0;
font-size: 15px;
text-align: center;
background: rgba(#fff,0.6);
}
}
Javascript :
$captionFromAlt($tag('img','sample1',0),'div');
HTML :
<div id="sample2">
<div><img ・・・ alt="ピンクの花の写真"></div>
<div><img ・・・ alt="蕾の写真"></div>
</div>
Sass :
#sample2 {
& > div {
& > span { //追加するキャプション用のスタイル
display: block;
padding: 8px 0;
font-weight: 500;
font-size: 17px;
color: #fff;
text-align: center;
letter-spacing: 2px;
background: #000;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
}
}
Javascript :
$captionFromAlt($tag('img','sample2',0),'span',0);
$captionFromAlt($tag('img','sample2',1),'span',0);
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。