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