Question

我发现（这里，我认为）一个很好的紧凑的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实际使用我可以保存在thumb /目录中的较低res文件，但是然后让onclick事件显示照片中存在的较大尺寸图像/进入类预览图像

Answer 1

我想我找到了一个解决方案：

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

如果我添加标签＆＃34; name＆＃34;到每个缩略图的代码并将值作为较大文件的目录/名称，这将显示在目标（预览）窗口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>

使用低分辨率缩略图单击/查看完整或大图像

1 个答案: