加載圖像到div，PHP和jQuery invloved

這是我需要完成我的大學PHP課程的任務。我已經花了整整一天的時間，嘗試不同的東西（例如ajax jquery加載）。我很確定我需要走上我目前的道路。在a href作品中，onclick我試着用腳本部分做出的警告。但是，我不明白如何將圖像加載到div photoHolder。這位照片持有者應該包含我點擊的縮略圖。當然它應該是動態的。所以當我上傳圖片並且創建了一個自動縮略圖時，當我點擊縮略圖時應該顯示原始圖片。我還需要添加評論和評分，但我們先來看看它。加載圖像到div，PHP和jQuery invloved

我當然希望，畢竟這是一個我很瞭解的網站，有人可以幫助我。

的一塊PHP的其在href的onclick：

foreach ($images as $image) { 
    echo '<a href="#" onclick="makeBigger();"><img src="uploads/thumbs/', $image['album'], '/', $image['id'], '.', $image['ext'], '" title="Uploaded ', date('D M Y/H:i', $image['timestamp']), '" /></a> 


      [<a href="delete_image.php?image_id=', $image['id'], '">x</a>]'; 
    } 
} 
?> 

    <div id="photoHolder"></div>`

這個位於我的jQuery的一部分的header.php包括

function makeBigger() { 
      // This function needs to load the picture with a max width of 
      // 300px into the "photoHolder" div located on view_album.php 
    }

Ofcourse它現在是空的，因爲我希望從一張乾淨的紙張開始。

如果它是難以閱讀，這裏是一個要點我爲你做（#photoHolder是view_album.php的第30行）

Gist for you

編輯如果還不清楚我需要加載位於我上傳文件夾中的較大圖像。這是我怎麼點擊拇指時，在新標籤加載一個例子鏈接：

<a href="uploads/', $image['album'], '/', $image['id'], '.', $image['ext'], '"></a>

來源

2013-10-22 PimWillems

好頭號問題這裏是你沒有任何的jQuery。你需要爲此包含jquery庫。您可以通過$ global變量（如$（Do stuff）.likethis（{triggeringthisfunction}））來一目瞭然地告訴jquery。 - jQuery並不那麼簡單，所以我不確定他們爲什麼將它分配給PHP類的介紹。 – baordog

如何獲取較大圖片的網址？ –

@baordog爲什麼你會說jQuery沒有被使用會是一個問題？ Javascript足以滿足OP想要實現的功能。 jQuery只是一個功能將是一個矯枉過正。 –

使用jQuery（http://jquery.com/），就可以解決這個問題是這樣的：

您<head></head>標籤之間添加如下：

<script type="text/javascript" 
     src="http://code.jquery.com/jquery-1.10.2.js"></script>

替換此：

onclick="makeBigger();"

與此：

onclick="makeBigger(this);"

和這裏的JavaScript函數：

function makeBigger(imageLink) 
{ 
    // get Image URL 
    var imageUrl = $(imageLink).find('img').attr('src'); 

    // load big image 
    $('photoHolder').html('<img src="'+imageUrl +'" width="300" />'); 
}

編輯： 或者，您可以添加替換：

<a href="#" onclick="makeBigger();">

有：

<a href="#" class="imageLink">

和你的功能應該是這樣的：

$(document).ready(function() 
{ 
    $('.imageLink').click(function() 
    { 
     // get Image URL 
     var imageUrl = $(this).find('img').attr('src'); 

     // load big image 
     $('photoHolder').html('<img src="'+ imageUrl +'" width="300" />'); 
    }); 
});

來源

2013-10-22 20:19:02 Latheesan

好，但儘量避免內聯JS。相反，使用事件處理程序，如'.on（'click'，function（）{}）;' – sdespont

解決問題的好方法！ +1 –

不知道爲什麼，由代碼塊從我的帖子中刪除了＃。這是正確的行：'$（'＃photoHolder'）。html（...）' – Latheesan

加載圖像到div，PHP和jQuery invloved

回答

相關問題