在每张图片周围添加链接

Question

我遇到了以下问题。我一直在手动移动大量内容，在插入图像时，我将灯箱类放在标签上 - 不幸的是，为了使图像正常工作，他们需要一个锚点来指定整个图像大小的网址 - 例如

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

我现在所拥有的只有：

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

是否可以在特定<div>元素内找到的每个图像周围自动设置anchar并正确关闭它？我需要像

这样的东西

<div>中的foreach图像前置<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

使用RegExp

模式：

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

替换为：

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

preg_replace PHP函数

Answer 4

就个人而言，我会修复生成源代码。只需在IDE中使用正则表达式查找/替换并修复源代码。不要依赖一些javascript或PHP hack来“修复”这个错误。