在图库中复制图片 | 在图库中复制图片

本文介绍了在图库中复制图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个图片库，显示所有图片内联，而目标图片显示在页面的其他位置。我想解决的问题是使目标图片更大，而不从图库流程中删除它。

I have an image gallery that displays all the images inline, and the targeted image displayed bigger elsewhere on the page. The problem I'd like to solve is to make the targeted image bigger, without removing it from the gallery flow.

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

小提琴：

即，当图片200显示得较大时，我希望它也保留

i.e, when say image 200 is displayed larger, I'd like it to also remain in the top gallery view, rather than just moving to the bottom of the page.

理想情况下有一个html / css解决方案？
我可以使用javascript解决方案，但请不要jquery。

Ideally there's an html/css solution?I'd be okay with a javascript solution, but please no jquery. I'm still learning javascript before I move on to jquery.

推荐答案

这里有一个工作示例：

Here a working example:http://jsfiddle.net/Stijntjhe/xxBEd/

没有多少JavaScript，把它放在你的< head> ：

Not much JavaScript at all, put it in your <head>:

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

添加一个简单的 onclick 到您的图片：

And add a simple onclick to your images:

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

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

Don't forget the extra <div> in your HTML:

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

编辑：

它甚至可能没有JavaScript，但你需要一些额外的HTML：

It's even possible without JavaScript, but you would need some extra HTML:http://jsfiddle.net/Stijntjhe/xxBEd/5/

这篇关于在图库中复制图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！