如何制作缩略图<img>在点击时显示完整尺寸的图像?

A H*_*san 13 html tags image

通常你有一个图像tage,src作为图像的来源,alt作为替代文本:

<img src="image1.gif" alt="Image 1" />
Run Code Online (Sandbox Code Playgroud)

你能拥有类似的东西吗?:

<img src="image1.gif" alt="image2.gif" />
Run Code Online (Sandbox Code Playgroud)

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

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

我尝试过这样的事情:

<a href="image2.gif" ><img src="image1.gif"/></a>
Run Code Online (Sandbox Code Playgroud)

...但我得到默认的" 未找到 "图像作为拇指(即使图像确实存在).

我正在使用JQuery/Javascript.

任何帮助,建议甚至替代品都欢迎和赞赏.

谢谢


谢谢Sam的回复,

我不喜欢灯箱,因为我发现它太慢而且很花哨.

但我喜欢geowa4的想法.

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

谢谢

Nor*_*sey 16

<a href="image2.gif" ><img src="image1.gif"/></a>
Run Code Online (Sandbox Code Playgroud)

技术一直对我有用.我在超级碗日记中使用它效果很好,但我看到我使用的脚本坏了.一旦我修复它们,我将在URL中进行编辑.


Sam*_*Sam 10

alt 是无法加载图像或用户浏览器不支持图像时显示的文本(例如盲人阅读器).

尝试使用灯箱之类的东西:

http://www.lokeshdhakar.com/projects/lightbox2/

更新:这个库可能更好,因为它基于jQuery,你已经说过你使用 http://leandrovieira.com/projects/jquery/lightbox/


geo*_*wa4 8

<img src='thumb.gif' onclick='this.src="full_size.gif"' />
Run Code Online (Sandbox Code Playgroud)

当然,您可以更改onclick事件以在任何位置加载图像.