选择时弹出的缩略图（javascript）答案

【问题标题】：thumbnail image that pop when selected (javascript)选择时弹出的缩略图（javascript）
【发布时间】：2014-06-29 04:11:40
【问题描述】：

所以我想知道是否有可能，例如，我有一个图像列表，当我从其中选择一个时，图像显示比另一个更大，以便在其他图像和缩略图中看到它，如果我选择另一个缩略图，大图像被我选择的那个替换等等......但是在javascript（和html）中？如果是这样，这样做的代码结构是什么？ 并且不使用 jquery 或类似的 javascript 代码生成器之类的东西；我想自己手动完成

谢谢

【问题讨论】：

标签： javascript html image thumbnails

【解决方案1】：

看看 Lightbox jQuery 插件。这可能就是你要找的东西

http://www.lokeshdhakar.com/projects/lightbox2/?u=9 1

【讨论】：

谢谢，但是我修改了我的问题；我忘了说我想在没有外部插件或jquery的情况下完成；我想自己手动完成（代码）。

【解决方案2】：

你的意思是这样的吗？（或者至少在正确的轨道上）

JSFiddle

HTML：

<a href="http://placehold.it/500">http://placehold.it/500</a>
<a href="http://placehold.it/510">http://placehold.it/510</a>
<a href="http://placehold.it/520">http://placehold.it/520</a>
<a href="http://placehold.it/530">http://placehold.it/530</a>
<a href="http://placehold.it/540">http://placehold.it/540</a>
<a href="http://placehold.it/550">http://placehold.it/550</a>
<a href="http://placehold.it/560">http://placehold.it/560</a>
<a href="http://placehold.it/570">http://placehold.it/570</a>
<a href="http://placehold.it/580">http://placehold.it/580</a>
<a href="http://placehold.it/590">http://placehold.it/590</a>
<a href="http://placehold.it/600">http://placehold.it/600</a>

<div id="popup"><img src="" alt=""/></div>

JavaScript：

var a = document.getElementsByTagName("a"),
popup = document.getElementById("popup"),
img = document.getElementsByTagName("img")[0];

for(i = 0; i < a.length; i++)
{
    a[i].onclick = function(){
        popup.style.display="block";
        img.src = this.href;
        img.alt = this.innerHTML;
        return false;
    }
}

【讨论】：