JQueryUI模態對話框;與動態圖像使用

我使用jQueryUI的對話框模式是這樣的：JQueryUI模態對話框;與動態圖像使用

<div id="dialog-modal" title="Basic modal dialog"> 
    <img src="#" alt="Pictures" /> 
</div>

我有一個PHP 的foreach循環顯示在任何給定時刻三個圖像圖標。圖片網址位於MySQL數據庫中。圖像本身包含在錨標籤內，並顯示爲縮略圖。 <a>包含一個名爲「theLink」的類。 jQuery知道打開對話框時，你點擊「theLink」（本質上，點擊圖片）。

我希望通過點擊它可以讓圖像顯示得比縮略圖大得多。然後它會動態地將圖像鏈接轉移到將顯示的模式對話框。再次，在<body>標籤下面有一個模式對話框div（如上所示）。這是我正在尋找的：

當你點擊「theLink」時，它將從img獲取PHP生成的圖像鏈接，並用它來代替模態div中的「＃」。

<a> <img src="PHP GENERATED" /> </a>

您可以添加更多的是您有一個請問題HTML，CSS和JavaScript/jQuery的嗎？我正在努力去理解問題所在。 – andyb

我想出了jQuery基礎知識的答案。

我不得不在PHP生成的圖像中創建一個名爲ImageLink的類。我必須使用一個類，而不是一個ID，因爲這個類會重複三次，因爲我一次顯示三個縮略圖。

關鍵字'this'很重要，所以我可以指向特定的imageLink類。

<a><img src="PHP GENERATED" class="imageLink" /></a>

然後，在jQuery的：

var realImage = $(this).find('.imageLink').attr("src"); 
    $('#popUpImage').attr('src', realImage); 
    $('#dialog-modal').dialog('open');

2012-05-23 23:40:59 KickingLettuce

回答