Html 单击时如何使缩略图 <img> 显示全尺寸图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/467927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a thumbnail <img> show a full size image when clicked?
提问by A Hassan
Normally you have an image tage with the src as the source of the image and the alt as the alternative text:
通常你有一个图像标签，其中src作为图像的来源，alt作为替代文本：
<img src="image1.gif" alt="Image 1" />
Can you have something like is?:
你能有类似的东西吗？：
<img src="image1.gif" alt="image2.gif" />
So that means the src has an image source and the alt also has an image source.
所以这意味着src有一个图像源，alt也有一个图像源。
What I want to do is pull 2 images from flickr using the flickr api (a thumb image and a normal sized image) and when the user clicks on the thumb, the normal sized image is shown.
我想要做的是使用 flickr api（一个拇指图像和一个正常大小的图像）从 flickr 中提取 2 个图像，当用户单击拇指时，会显示正常大小的图像。
I have tried something like this:
我试过这样的事情：
<a href="image2.gif" ><img src="image1.gif"/></a>
...but I get the default 'not found' image as the thumb (even though the image does really exist).
...但我得到默认的“未找到”图像作为拇指（即使图像确实存在）。
I am using JQuery/ Javascript.
我正在使用 JQuery/Javascript。
Any help, suggestions or even alternatives are all welcome and appreciated.
任何帮助、建议甚至替代方案都受到欢迎和赞赏。
Thanks
谢谢
Thanks for the reply Sam,
谢谢山姆的回复，
I don't like lightbox because I find it too slow and fancy.
我不喜欢灯箱，因为我觉得它太慢太花哨了。
but I like geowa4's idea.
但我喜欢geowa4的想法。
but please, keep your answers coming...
但是请保持你的答案......
thanks
谢谢
回答by Norman Ramsey
The
这
<a href="image2.gif" ><img src="image1.gif"/></a>
technique has always worked for me. I used it to good effect in my Super Bowl diary, but I see that the scripts I used are broken. Once I get them fixed I will edit in the URL.
技术一直对我有用。我在我的超级碗日记中使用它效果很好，但我发现我使用的脚本被破坏了。一旦我修复了它们，我将在 URL 中进行编辑。
回答by Sam
altis text that is displayed when the image can't be loaded or the user's browser doesn't support images (e.g. readers for blind people).
alt是无法加载图像或用户的浏览器不支持图像（例如盲人阅读器）时显示的文本。
Try using something like lightbox:
尝试使用灯箱之类的东西：
http://www.lokeshdhakar.com/projects/lightbox2/
http://www.lokeshdhakar.com/projects/lightbox2/
update: This library maybe better as its based on jQuery which you have said your using http://leandrovieira.com/projects/jquery/lightbox/
更新：这个库可能更好，因为它基于 jQuery，你说过你使用 http://leandrovieira.com/projects/jquery/lightbox/
回答by geowa4
<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Of course you can change the onclick event to load the image wherever you want.
当然，您可以更改 onclick 事件以在您想要的任何位置加载图像。
回答by Michael Haren
This won't do what you are expecting:
这不会做你所期望的：
<img src="image1.gif" alt="image2.gif" />
The ALT attribute is text-only--it won't do anything special if you give it an image URL.
ALT 属性是纯文本的——如果你给它一个图像 URL，它不会做任何特殊的事情。
If you want to initially display a low res image, then replace it with a high res image, you could do some javascript coding to swap out the images. Or, perhaps load the image into a div which has a background pattern filled with the low res image. Then, when the high res image loads, it'll load overtop the background.
如果您想最初显示低分辨率图像，然后将其替换为高分辨率图像，您可以执行一些 javascript 编码来换出图像。或者，也许将图像加载到具有填充低分辨率图像的背景图案的 div 中。然后，当高分辨率图像加载时，它会加载到背景之上。
Unfortunately, there's no direct way to do this.
不幸的是，没有直接的方法可以做到这一点。
Your second attempt will create a link to image2, but actually display image1.
您的第二次尝试将创建指向 image2 的链接，但实际上显示的是 image1。
<a href="image2.gif" ><img src="image1.gif"/></a>
If you want to popup a higher res version, @Sam's suggestion is a good idea.
如果您想弹出更高分辨率的版本，@Sam 的建议是个好主意。
This CSS might work for you (it works for me in Firefox 3):
这个 CSS 可能对你有用（它在 Firefox 3 中对我有用）：
<html>
<head>
<style>
.lowres { background-image: url('low-res.png');}
</style>
</head>
<body>
<div class="lowres" style="height:500px; width:500px">
<img src="hi-res.png" />
</div>
</body>
</html>
In that example, you have to set the div height/width to that of the image. It will actually load both images simultaneously, but presuming the low-res one loads quick, you might see it first while the hi-res image downloads.
在该示例中，您必须将 div 高度/宽度设置为图像的高度/宽度。它实际上会同时加载两个图像，但假设低分辨率图像加载速度快，您可能会在高分辨率图像下载时首先看到它。
回答by Sampath
Here is the Angular version of LightBox. Just Awesome :)
这是 LightBox 的 Angular 版本。太棒了:)
Note : I have put this answer hence No Js library has been mentioned under the Tags.
注意：我已经提出了这个答案，因此标签下没有提到任何 Js 库。
<ul ng-controller="GalleryCtrl">
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
回答by Carlo Guevarra
Use this as an example
以此为例
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_popup_image
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div id="pageone" data-role="main" class="ui-content">
<p>Click on the image to enlarge it.</p>
<p>Notice that we have added a "back button" in the top right corner.</p>
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" alt="Skaret View" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<p>This is my picture!</p>
<a href="#pageone" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="https://lh3.googleusercontent.com/8XQPMmZImaDsSyEPbAptXOHQYZKP_rggu_tr9EPl3jpPnuXOd5gGP5kQKqFT0ZLXQ36-=s136" style="width:800px;height:400px;" alt="Skaret View">
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>回答by Ates Goral
A scriptless, CSS-only experimental approach with image pre-loadingBONUS!and which only works in Firefox:
一种无脚本、纯 CSS 的实验方法，带有图像预加载奖励！并且仅适用于 Firefox：
<style>
a.zoom .full { display: none; }
a.zoom:active .thumb { display: none; }
a.zoom:active .full { display: inline; }
</style>
<a class="zoom" href="#">
<img class="thumb" src="thumbnail.png"/>
<img class="full" src="fullsize.png"/>
</a>
Shows the thumbnail by default. Shows the full size image while the mouse button is clicked and held down. Goes back to the thumbnail as soon as the button is released. I'm in no way suggesting that this method be used; it's just a demo of a CSS-only approach that [very] partially solves the problem. With some z-index + relative position tweaks, it could work in other browsers too.
默认显示缩略图。单击并按住鼠标按钮时显示全尺寸图像。释放按钮后立即返回缩略图。我绝不建议使用这种方法；它只是一个纯 CSS 方法的演示，[非常] 部分地解决了这个问题。通过一些 z-index + 相对位置调整，它也可以在其他浏览器中工作。
回答by dylanfm
That sort of functionality is going to require some Javascript, but it is probably possible just to use CSS (in browsers other than IE6&7).
这种功能将需要一些 Javascript，但可能只使用 CSS（在 IE6 和 7 以外的浏览器中）。
