Question

我在我正在处理的网站上有一个图库页面，我无法触及大部分HTML，包括图片。我把奇特的盒子放到页面上，因为我想在点击缩略图后弹出图像。这是我的css的样子：

<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
    <a class="thumbnail fancybox" rel="lightbox" href="#">
         <img src="images/gal1.jpg" class="img-responsive">
    </a> 
</div>

为了得到这个结构，我不得不添加这个脚本：

$('.col-sm-8 img').addClass('img-responsive');
$('.col-sm-8 img').wrap('<a class="thumbnail fancybox" rel="lightbox" href="#"></a>');
$('a.thumbnail.fancybox').wrap('<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3"></div>');
$('div.col-sm-4.col-xs-6.col-md-3.col-lg-3').wrapAll('<div class="list-group gallery"></div>');

除了图像弹出之外，这一切都很有效 - 因为花式框工作的方式需要在缩略图周围的锚标记的href中的图像链接。是否可以在内容中选择图像并将其放在href中，使其有效显示：

<div class="col-sm-4 col-xs-6 col-md-3 col-lg-3">
        <a class="thumbnail fancybox" rel="lightbox" href="images/gal1.jpg">
             <img src="images/gal1.jpg" class="img-responsive">
        </a> 
    </div>

由于

Answer 1

此代码段应该按照您的要求执行。

$('a.thumbnail').each(function(){
    var a = $(this).find('img').attr('src');
    $(this).attr('href', a);
});

编辑以符合您的评论。

动态地从内容中提取图像以放入花式框的href中

1 个答案: