巨大なコンテンツを含むWebサイトを完成させるときに問題が発生しました。コンテンツ内のすべての画像にライトボックスを設定していました。誤って「ライトボックス」クラスが画像に設定されており、画像の周囲にリンクが作成されていません。
そこで、jQuerys wrap()関数を使用して、コンテンツ領域のすべての画像の周りにライトボックス画像リンクを追加できることがわかりました。残念ながら、すでにアンカーで囲まれている画像(PDFリンクなど)をラップして上書きします。
まだアンカータグの一部ではないコンテンツ内の画像のみを囲むようにjQueryに指示するにはどうすればよいですか?
私は今次のものを持っています:
<script type="text/javascript">
$(document).ready(function($){
$('article img').each(function(){
if ($('article img').hasClass('lightbox')){
$(this).removeAttr('class');
}
$(this).wrap('<a href="'+this.src.replace("http://www.mydomain.com","")+'" class="lightbox" rel="group1"></a>');
});
$('.lightbox').lightbox();
});
</script>
そのため、画像からライトボックスクラスを削除し、画像と同じsrc(サムネイルなし)ですべての画像の周りにアンカーを追加しています。