Question

我有一张图片已经通过CSS调整大小，在HTML页面上显示为100x100px。单击时，我想在彩色框中打开图像 - 这样用户就可以看到通常出现的非调整大小/压缩版本。

我已经研究了如何将href的路径设置为自身（因此不必每次都更改）（见下文），虽然不确定如何让colorbox部分工作 - 我尝试改变'each'到'colorbox' - 根据你通常如何分配颜色框，它打开，它只是不加载图像：S

任何指针都会很棒 -

<div class="logoImage"><img src="../tym_img_shared/background-2.jpg" alt="Your company logo" /></div>

 $(document).ready(function(){
$('div.logoImage img').each(function(){
    var $this = $(this);
    $this.wrap('<a href="' + $this.attr('src') + '"></a>');
});

}）;

更新：考虑一下，也许更容易设置链接的're'属性设置源？

更新：

$(document).ready(function(){
    $('div.logoImage img').each(function(){
        var $this = $(this);
        $this.wrap('<a rel="gallery" href="' + $this.attr('src') + '"></a>');
    });

});

由于某种原因不起作用 - 但如果我对URL和rel进行硬编码会这样做吗？

Answer 1

这就是诀窍......

$(document).ready(function(){
  $('.logoImage img').each(function(){
        var anchor = $('<a/>').attr({'href': this.src}).colorbox({height: "90%", title: "Your Company Logo"});
        $(this).wrap(anchor);
  });
});

Answer 2

对于任何正在寻找的人来说，这里的纯javascript版本没有彩盒：

var elements = Array.prototype.slice.call(document.getElementsByTagName('img'));
elements.forEach(function(el, i){
    var newHTML = "<a href='"+ el.src +"'>" + el.outerHTML + "</a>";
    el.outerHTML = newHTML;
});

设置图像以链接到自身并在彩色框中打开

2 个答案: