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

时间:2011-07-20 16:41:05

标签: jquery jquery-plugins colorbox

我有一张图片已经通过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进行硬编码会这样做吗?

2 个答案:

答案 0 :(得分:5)

这就是诀窍......

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

答案 1 :(得分:0)

对于任何正在寻找的人来说,这里的纯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;
});