Question

我制作了一个简单的图库，使用此脚本显示图像：

 $rs = mysql_query('SELECT * FROM images WHERE oferta_id=2');


 while($row = mysql_fetch_array($rs))
  {
        echo '<li onclick="Large()"><img src='.$row['location'].' alt="image"/></li>';

  }

我希望以某种方式使用javascript，当用户点击某个图片弹出一个框时，他会看到图片更大。我想我正在使用onclick进行正确的方式<li>标记，但几乎不知道如何制作Large()函数。对该主题有任何帮助吗？

由于

Leron

Answer 1

你可以给每个＆lt; img＆gt;递增的数字id，并将其传递给Large函数，即

onclick="Large(0)"

并且每张图片都是

<img id="image_0" .... />

这样您就可以在大型函数中获得对该特定图像的唯一引用。

即

function Large(index){
  var image = document.getElementById('image_' + index);
  //your code here
};

或已经建议，您可以使用灯箱。

另外，另一种选择是只需在onclick处理程序中添加图像并传递它，然后你也可以直接引用图像，并切断中间人，就像它一样。即。

<img onclick="Large(this) .... />

只是一些值得思考的东西

Answer 2

我只是使用jquery插件或其他javascript框架的插件。谷歌搜索“jquery lightbox”并查看示例。

除非你需要一些不具备的特定功能，或者希望建立自己的功能作为学习练习，否则编写自己的功能绝对没有意义。

Answer 3

我建议您查看较大图片的100个灯箱选项。只是谷歌灯箱。

onclick在弹出框中显示图像

3 个答案: