點擊圖像縮略圖，圖像將被裝載到大尺寸

容器DIV我有一些縮略圖下一個代碼：點擊圖像縮略圖，圖像將被裝載到大尺寸

<div class="gallery-wrap"> 
    <div class="gallery galleryid-45" id="gallery-1"> 
     <dl class="gallery-item"> 
      <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/ring-wedding.jpg"><img height="66" width="67" class="attachment-thumbnail" src="ring-wedding-67x66.jpg"></a> </dt> 
     </dl> 
     <dl class="gallery-item"> 
      <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-rings.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-rings-67x66.jpg"></a> </dt> 
     </dl> 
     <dl class="gallery-item"> 
      <dt class="gallery-icon"> <a href="http://somedomain.com/wp-content/uploads/2011/06/wedding-ring-test-31.jpg"><img height="66" width="67" class="attachment-thumbnail" src="wedding-ring-test-31-67x66.jpg"></a> </dt> 
     </dl> 
     <br style="clear: both"> 
    </div> 
</div> 
<div id="imageBox">&nbsp;</div>

這是由WordPress生成具有內置的庫函數，它是定製的畫廊一點點由我。

我希望每當我點擊一個縮略圖時，圖像在#imageBox改變。我想測試兩種情況，

當頁面加載和#imageBox是空的，
當頁面加載和#imageBox到已經包括了根據第一縮略圖:)

第一圖像

我知道有一個解決方案（Click on a thumbnail, an image in a div changes），但不適合我，我認爲這是因爲不同的HTML標記結構。

有沒有人有一個想法如何開始/解決這個問題？

來源

2011-06-17 Grávuj Miklós Henrich

這是正確的。我很欣賞任何人的幫助，但是接受一個對我沒有幫助的答案是我的一個謊言。但也感謝你告訴我，所以我想起了接受它們的最新答案。遲早我會接受他們的肯定:) – 2011-06-17 13:07:02

$(".gallery-item a").click(function (evt) { 
    evt.preventDefault(); 
    $("#imageBox").empty().append( 
    $("<img>", {src: this.href}) 
); 
});

看到它的工作：http://jsfiddle.net/kq9bp/1/

來源

2011-06-17 13:15:20 Tomalak

嗨。謝謝你的幫助。我認爲你的建議是有道理的，但在我的環境中它不起作用:(點擊縮略圖時，圖像像平常一樣被加載到一個新的空白頁面中。「`是jquery是由我的wordpress加載的：| – 2011-06-17 13:46:48

點擊圖像縮略圖，圖像將被裝載到大尺寸

回答

相關問題