在每张图片周围添加链接

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来“修复”这个错误。