图片库中的重复图片

我有一个图片库，它内嵌显示所有图片，并且在页面的其他地方显示的目标图片更大。我想解决的问题是使目标图片变大，而不会将其从图库流中移除。图片库中的重复图片

<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。

来源

2013-07-23 Eric Wolf

这里工作的例子： 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/

来源

2013-07-23 01:42:49

这几乎可以工作，主要问题是1.新项目和旧项目都在改变大小和2.新项目不在页面的底部（这不需要/固定，理想情况下图像将足够大以填充空间） –

我刚更改CSS来解决这些问题： http://jsfiddle.net/Stijntjhe/xxBEd/4/ –

看起来不错！我试图找出如何实质上将CSS从img：target移动到下一个#big选择器。到目前为止，我只从img：target复制粘贴到#big> img，但它没有做我想做的事... –

我只需要添加一个基本的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到美容吧;）

来源

2013-07-23 02:22:31

图片库中的重复图片

回答

相关问题