動態地從內容中拉出圖像放入花式框中的href

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

編輯以匹配您的評論。