Question

通常你有一个图像标签， src 作为图像的来源，而 alt 作为替代文字：

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

你能拥有类似的东西吗？：

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

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

我想要做的是使用flickr api（拇指图像和正常尺寸的图像）从flickr中拉出2张图像，当用户点击拇指时，会显示正常尺寸的图像。

我尝试过这样的事情：

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

...但我以拇指的形式获得默认的“not found”图片（即使图片确实存在）。

我正在使用JQuery / Javascript。

任何帮助，建议甚至替代方案都是受欢迎和赞赏的。

由于

感谢Sam的回复，

我不喜欢灯箱，因为我觉得它太慢而且很花哨。

但我喜欢geowa4的想法。

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

感谢

Answer 1

在

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

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

Answer 2

alt是无法加载图片或用户浏览器不支持图片时显示的文字（例如盲人阅读器）。

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

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

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

Answer 3

<img src='thumb.gif' onclick='this.src="full_size.gif"' />

当然，您可以更改onclick事件以在任意位置加载图像。

Answer 4

这不符合您的期望：

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

ALT属性仅限文本 - 如果您为其提供图片网址，则不会执行任何特殊操作。

如果你想最初显示低分辨率图像，然后用高分辨率图像替换它，你可以做一些javascript编码来换掉图像。或者，可能将图像加载到具有填充低分辨率图像的背景图案的div中。然后，当高分辨率图像加载时，它将加载到背景之外。

不幸的是，没有直接的方法可以做到这一点。

您的第二次尝试将创建指向image2的链接，但实际上会显示image1。

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

如果你想弹出更高版本的版本，@ Sam的建议是个好主意。

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

在该示例中，您必须将div高度/宽度设置为图像的高度/宽度。它实际上会同时加载两个图像，但假设低分辨率加载快速，你可能会在高分辨率图像下载时首先看到它。

Answer 5

我不这样做 - alt标签专门用于不显示图像的时候。但是，这适用于很多jQuery的东西，“rel”属性非常有用。

Answer 6

这种功能需要一些Javascript，但可能只使用CSS（在IE6和7以外的浏览器中）。

Answer 7

无脚本，仅限CSS的实验方法，图像预加载^BONUS！，仅适用于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>

默认显示缩略图。单击并按住鼠标按钮时显示完整尺寸的图像。释放按钮后立即返回缩略图。我绝不建议使用这种方法;它只是一个仅使用CSS的方法的演示，[非常]部分地解决了这个问题。通过一些z-index +相对位置调整，它也可以在其他浏览器中使用。

Answer 8

这是LightBox的Angular版本。真棒：）

注意：我已经提出了这个答案，因此在标签下没有提到过Js库。

<强> angular-bootstrap-lightbox

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

Answer 9

以此为例

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>

单击时如何使缩略图<img/>显示完整尺寸的图像？

9 个答案: