單擊以在彈出框中顯示圖像

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多個燈箱選項，以獲取更大的圖像。 只是谷歌燈箱。