自分自身にリンクする画像を設定してカラーボックスで開く

Question

HTMLページに100x100pxとして表示するようにCSSでサイズ変更された画像があります。クリックすると、画像をカラーボックスで開きたいので、通常は表示されないように、サイズ変更されていないバージョンを見ることができます。

私は、hrefのパスを自分自身に設定する方法を試しました（これは毎回変更する必要はありません）（下記参照）変更「はそれぞれ」「カラーボックス」に - あなたは通常、カラーボックスを割り当てます、そしてそれがどのように開くかに従って、それはそれでイメージをロードしません：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>'); 
}); 

}）;

UPDATE：考えてみると、ソースを設定しているリンクのwhist属性を設定する方が簡単でしょうか？

UPDATE：

$(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のバージョンのsansカラーボックスですでした：

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; 
});