在每张图片周围添加链接

时间:2013-02-22 17:14:51

标签: php jquery hyperlink image

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

<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中的任何解决方案!

4 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:1)

使用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>')
 });

答案 2 :(得分:0)

使用RegExp

模式:

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

替换为:

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

preg_replace PHP函数

答案 3 :(得分:0)

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