單擊縮略圖並將圖像加載到空div中

從縮略圖加載圖像似乎已被覆蓋，但我無法將我的大腦包裹在它周圍。這裏是我的html其中#sideWall持有大拇指，我想踩蘇亞雷斯進入#photoHolder ...單擊縮略圖並將圖像加載到空div中

<div id="graphicContainer"> 
<div id="sideWall"> 
    <span class="sideHead">EXHIBITS</span><br/> 
    <span class="sideChatter">Click an image to learn more.</span><br/> 
    <img src="images/frisco4501_t.jpg" full="frisco4501.jpg" /> 
    <img src="images/centennial_t.jpg" full="centennial.jpg" /> 
    <!--  etc...  --> 
</div> <!--End of sidewall--> 
<div id="photoHolder"></div>

這裏是我的$。警報（）的返回正確的目錄和淡入淡出的工作，像正好沒有加載...

$('#sideWall img').each(function(){ 
    $this = $(this); 
    $image = "../images/"+$this.attr('full'); 
    $this.click(function(){ 
     alert($image); 
     $("#photoHolder").html('<img src="'+$image +'" />'); 
     $("#photoHolder").fadeIn(2000);   
    }) 
});

來源

2012-08-30 Layne

爲什麼你得到屬性'全'而不是'src'？ – manish

完整圖像不在同一目錄？ –

@immanish'src'是最後一個帶有「_t」的單獨圖像。完整的雷茲版沒有「_t」。兩者都在同一個目錄中。 – Layne

我認爲，該解決方案可以更簡單地完成：

$('#sideWall img').click(function(){ 
    var c = $(this).attr("src").replace('_t.','.'); 
    $("#photoHolder").html('<img src="'+ c +'" />'); 
    $("#photoHolder").fadeIn(2000);   
})

（常見的實踐中） - 拇指具有相同的名稱並且位於相同的目錄中。那麼不需要屬性「滿」。

來源

2012-08-30 22:34:26

謝謝，這個修復了它。看了這個之後，我仍然不確定我的原始代碼在哪裏被破壞了？ – Layne

如果您的提醒顯示目錄，則只有'$ this.attr（'full'）'有問題。 –

是否可以緩存下載的圖像？ –

Live example

無需爲.each()：

$('#sideWall img').click(function(){ 
    $this = $(this); 
    $image = '../images/'+ $this.attr('full'); 
    $("#photoHolder").hide().html('<img src="'+$image +'" />').fadeIn(2000);   
});

來源

2012-08-30 22:34:57

我會嘗試這樣的事：

$('#sideWall img').click(function(){ 
    $image = "../images/"+$(this).attr('data-full'); 
    alert($image); 
    $("#photoHolder").html('<img src="'+$image +'" />').fadeIn(2000);   
});

沒得測試，但它應該工作。請注意，我將attr'full'更改爲'data-full'以使其HTML5有效。

來源

2012-08-30 22:36:26 Robyflc

單擊縮略圖並將圖像加載到空div中

回答

相關問題