如何制作缩略图<img>单击时显示全尺寸图像? [英] How can I make a thumbnail <img> show a full size image when clicked?

问题描述

通常你有一个图像标签，其中 src 作为图像的来源，alt 作为替代文本:

Normally you have an image tage with the src as the source of the image and the alt as the alternative text:

<img src="image1.gif" alt="Image 1" />

你能有类似的东西吗?:

Can you have something like is?:

<img src="image1.gif" alt="image2.gif" />

这意味着 src 有一个图像源，而 alt 也有一个图像源.

So that means the src has an image source and the alt also has an image source.

我想要做的是使用 flickr api 从 flickr 中提取 2 个图像(一个拇指图像和一个正常大小的图像)，当用户点击拇指时，会显示正常大小的图像.

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.

我尝试过这样的事情:

<a href="image2.gif" ><img src="image1.gif"/></a>

...但我得到默认的not found' 图像作为拇指(即使图像确实存在).

...but I get the default 'not found' image as the thumb (even though the image does really exist).

我正在使用 JQuery/Javascript.

I am using JQuery/ Javascript.

欢迎和赞赏任何帮助、建议甚至替代方案.

Any help, suggestions or even alternatives are all welcome and appreciated.

谢谢

感谢山姆的回复，

我不喜欢灯箱，因为我觉得它太慢太花哨了.

I don't like lightbox because I find it too slow and fancy.

但我喜欢geowa4的想法.

但请保持你的答案......

but please, keep your answers coming...

谢谢

推荐答案

<a href="image2.gif" ><img src="image1.gif"/></a>

技术一直对我有用.我在超级碗日记中使用它效果很好，但我发现我使用的脚本被破坏了.修复它们后，我将在 URL 中进行编辑.

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.

这篇关于如何制作缩略图<img>单击时显示全尺寸图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！