使用低分辨率縮略圖點擊/查看完整或大圖像

我發現（這裏，我認爲）一個不錯的緊湊的javascript函數，非常好地允許用戶點擊一個小圖片查看完整/更大版本的相同的圖像。問題在於，小圖像實際上只是css樣式（例如高度限制爲100px）的同一圖像文件副本......這意味着如果我在一個集合中有很多潛在圖像，則需要很長時間加載這些「縮略圖」（因爲它們不是真正的小文件大小的縮略圖）。使用低分辨率縮略圖點擊/查看完整或大圖像

這裏是我使用的代碼片段：

var lastImg = 1; //Set initial thumbnail and preview 
 
document.getElementById(-1).src = document.getElementById(lastImg).src; 
 
document.getElementById(lastImg).className = "thumb"; 
 

 
function preview(img) { 
 
    document.getElementById(lastImg).className = "thumb"; 
 
    img.className = "thumb"; 
 
    document.getElementById(-1).src = img.src; 
 
    lastImg = img.id 
 
}

.preview {width: 100%;} 
 
.thumb {margin:2px; height:100px; float:left;}

<img id="0" class="thumb" src="photos/1406960_00.jpg" alt="thumb0" onclick="preview(this);" /> 
 
<img id="1" class="thumb" src="photos/1406960_01.jpg" alt="thumb1" onclick="preview(this);" /> 
 
<img id="2" class="thumb" src="photos/1406960_02.jpg" alt="thumb2" onclick="preview(this);" /> 
 
<img id="3" class="thumb" src="photos/1406960_03.jpg" alt="thumb3" onclick="preview(this);" /> 
 
<div style="clear:both;"></div> 
 
<img id="-1" src="photos/1406960_00.jpg" class="preview" alt="default first image" />

我想在類拇指圖像的SRC實際使用較低的資源文件，我可以保持一個拇指/目錄，然後讓onclick事件顯示照片中存在的較大尺寸圖像/進入課堂預覽圖像。

來源

2015-04-23 phc_joe

我想我已經找到了一個解決方案：

<img id="0" class="thumb" src="thumbs/1406960_00.jpg" name="photos/1406960_00.jpg" alt="thumb" onclick="preview(this);" />

如果我添加標籤「名」的代碼爲每一個縮略圖像，並給予價值作爲較大的文件的目錄/名稱，這將顯示在目標（預覽）窗口onclick：而不是使腳本使用img.src，使用img.name。（document.getElementById（-1）.src = img.name;）

<script type="text/javascript"> 
    var lastImg = 1; //Set initial thumbnail and preview 
    document.getElementById(-1).src = document.getElementById(lastImg).src; 
    document.getElementById(lastImg).className = "thumb"; 

    function preview(img) { 
     document.getElementById(lastImg).className = "thumb"; 
     img.className = "thumb"; 
     document.getElementById(-1).src = img.name; //<-this seems to work 
     lastImg = img.id 
    } 
</script>

來源

2015-04-23 20:31:29

使用低分辨率縮略圖點擊/查看完整或大圖像

回答

相關問題