单击以在弹出框中显示图像

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，当用户单击某个图片时，会弹出一个框，并且他看到的图片更大。我认为使用<li>标记中的onclick是正确的方式，但是几乎不知道如何制作Large()函数。有关该主题的任何帮助吗？

谢谢

勒伦

Answer 1

您可以给每个<img>一个递增的数字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多个灯箱选项，以获取更大的图像。 只是谷歌灯箱。