Question

我有一个图像库，可以内嵌显示所有图像，并且目标图像在页面的其他位置显示得更大。我想解决的问题是使目标图像更大，而不将其从图库流中移除。

<div class="gallery">
    <a href="#1"><img id="1" src="http://placehold.it/100" /></a>
    <a href="#2"><img id="2" src="http://placehold.it/200" /></a>
    <a href="#3"><img id="3" src="http://placehold.it/300" /></a>
    <a href="#4"><img id="4" src="http://placehold.it/400" /></a>
</div>

小提琴：http://jsfiddle.net/GxxV5/

即，当图像200显示得更大时，我希望它也保留在顶部图库视图中，而不是仅仅移动到页面底部。

理想情况下，有一个html / css解决方案吗？我可以使用javascript解决方案，但请不要jquery。我在继续学习jquery之前还在学习javascript。

Answer 1

这是一个工作示例： http://jsfiddle.net/Stijntjhe/xxBEd/

根本没有多少JavaScript，请将其放在<head>：

中

function show(img) {
    document.getElementById('big').innerHTML = '<img src="' + img.src + '" />';   
}

在图片中添加一个简单的onclick：

<img id="2" onclick="show(this);" src="http://placehold.it/200" />

不要忘记HTML中的额外<div>：

<div id="big"></div>

修改

甚至可以不使用JavaScript，但您需要一些额外的HTML： http://jsfiddle.net/Stijntjhe/xxBEd/5/

Answer 2

我只需在您的示例中添加一个基本的javascript函数，如：

function showMe(img, size) {
    document.getElementById("content").src = img.src;
    document.getElementById("content").style.width = size + "px";
    document.getElementById("content").style.height = size + "px";
}

您可以在JSFiddle看到完整的更改。请帮我添加一些css给beaufity吧，;）

图库中的重复图像

2 个答案: