在每張圖片周圍添加鏈接

Question

我遇到了以下問題。我一直在手動移動大量內容，插入圖像時，我把lightbox類放在標籤上 - 不幸的是圖像正常工作，他們需要在它們周圍定位一個錨點，指定完整圖像大小的url - 例如

<a href="images/myimage.jpg" class="lightbox"><img src="images/myimage.jpg"></a> 

所有我現在所得到的是：

<img src="images/myimage.jpg" class="lightbox"> 

是否可以自動設置每個圖像周圍的anchar特定<div>元素中找到並還適當地關閉它？我需要這樣的東西

的foreach圖像中<div>前置<a href="this.image.src">和追加</a>

在PHP或jQuery的任何解決方案將大大不勝感激！

Answer 1

您可以使用jQuery的.wrap()方法：

$('div img').each(function(){ 
    $(this).wrap('<a href="'+this.src+'" class="lightbox"></a>'); 
}); 

DEMO：http://jsfiddle.net/bztvw/

Answer 2

使用jQuery使用.wrap()：

$.each($('img'), function(){ 
    $(this).wrap('<a href="'+$(this).attr('src')+'" class="lightbox"></a>') 
}); 

如果指定這些圖片的div容器會更好那麼只有那些圖像會被包裝。事情是這樣的：

$.each($('#lighboximgwrapper img'), function(){ 
    $(this).wrap('<a href="'+$(this).attr('src')+'" class="lightbox"></a>') 
}); 

Answer 3

使用正則表達式

模式：

<img(.*)src="([\w\/\.]+)"(.*)> 

替換：

<a href="$2" rel="fancybox"><img src="$2" alt="" /></a> 

的preg_replace PHP函數

Answer 4

就個人而言，我會解決的代碼根兒來源。只需使用IDE中的正則表達式查找/替換並修復源代碼。不要依賴一些JavaScript或PHP hack來「修復」這個錯誤。