HTMLまたは何らかのJavaScriptを使用して、画像の「alt」タグ内にHTMLコードを追加できるかどうかを確認しようとしています。ファンシーボックスを画像ギャラリーとして使用しています。ファンシーボックスをフォームとして使用して画像を表示し、画像の説明にスタイル付きの情報 (箇条書きや区切りなど) を追加し、別のページに移動するボタンを追加しようとしています。現在、ボタンは機能していますが、そのボタンはjavascriptにあるため、すべてのファンシーボックス画像にはそのボタンと同じURLがあります。そして、各画像の各ボタンへの異なるリンクが必要です。
これは、現在ファンシーボックスの画像の下に代替テキストを表示している私が持っているjavascriptです。
$(".fancybox").fancybox({
padding : 0,
beforeShow: function () {
this.title = $(this.element).attr('title');
this.title = '<h4>' + this.title + '</h4>' + '<div style="width:100%; height: 150px; overflow: auto;">' + $(this.element).parent().find('img').attr('alt') + '<a class="button button-small" href="http://www.google.com"> Sign Up </a>' + '</div>';
},
helpers : {
title : { type: 'inside' },
}
});
そのファンシーボックスの index.html の html は次のとおりです。
<li class="item-thumbs span3 design">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
</li>