私は世界的に素晴らしいこのキャプション機能を持っています。alt 属性を入力すると、キャプションが作成され、 data 属性がキャプションのリンクとして作成されます。よく働く。
問題は、alt または data 属性に何もない場合でも、div が表示されることです。私のCSSでわかるように、リンクにはパディングのある背景があるため、これは問題です.dataまたはalt属性がない場合、空白のdivが黒い背景で表示されます.
関数を変更して、IF画像にaltがあり、表示がデータ情報と一緒にキャプションを作成し、それ以外の場合は.caption全体を表示しないようにしたいと考えています。
altがあるかどうかをjQueryにチェックさせる方法がわかりません。ALT 属性で、ALT とデータ情報を表示するかどうかを制御します。
これが私が現在持っているものです:
Jクエリ:
function imageCaption() {
var $image =$('img');
$image.wrap('<div class="box"></div>');
$image.each(function() {
var caption = this.alt;
var link = $(this).attr('data');
$(this).after('<div class="caption"><a href="'+ link +'" target="blank">'+ caption +'</a></div>');
});
}
HTML:
<img src="IMAGE URL" alt="This is my first image" data="http://www.google.com">
<img src="IMAGE URL">
^^ 2 番目の画像では、キャプション ボックスがレンダリングされ、空白のリンクがパディングされています。
CSS:
#photoWrapper .caption {
position: absolute;
bottom: 10px;
right: 5px;
text-transform: uppercase;
font-size: 10px;
}
#photoWrapper .caption a {
text-decoration: none;
color: #F1F1F1;
padding: 5px 10px 5px 10px;
background: rgba(0,0,0,0.7);
}
#photoWrapper .caption a:hover {
background: rgba(0,0,0,0.9);
color: #ff6666;
}
まとめとして、画像に alt 属性があるかどうかを確認する IF ステートメントを使用して関数を変更し、ある場合はリンクとテキストを含むキャプションを表示し、ない場合はキャプションを非表示にします。
ありがとう!