動態jQuery函數與PHP

我有一個jQuery函數，縮放圖片，使最大的測量是350px，無論原始大小。動態jQuery函數與PHP

jQuery的：從我的數據庫使用PHP循環

function Scale(){ 
    var img = new Image(); 
img.onload = function() { 
    alert('Orignal width:'+img.width+', height:'+img.height); 
    var width, height; 
    if (img.width > img.height) { 
     width = (img.width > 350 ? 350 : img.width); 
     height = img.height * (350/img.width); 
    } else { 
     height = (img.height > 350 ? 350 : img.height); 
     width = img.width * (350/img.height); 
    } 
    img.width=width; 
    img.height=height; 
    $("#img-holder").append(img); 
} 

img.src = "picture.jpg" 
}

我檢索圖片鏈接。

PHP：

$q = "SELECT * FROM `items`"; 
$row = mysqli_query($con, $q) or die(mysqli_error()); 
while($r = mysqli_fetch_assoc($row)) 
{ 
    //do stuff 
}

圖片鏈接將被存儲爲每次循環運行$r['picture']。

我的問題：我該如何爲循環檢索的每張圖片運行jQuery腳本？

來源

2013-04-11 Simon Carlson

你知道嗎有一個[CSS屬性]（https://developer.mozilla.org/en-US/docs/CSS/max-width）？ – Blazemonger 2013-04-11 14:57:35

該CSS屬性是否保持圖片的比例？ – 2013-04-11 15:01:59

取決於你如何做，是的。提交了一個答案。 – Blazemonger 2013-04-11 15:02:53

在您的CSS中爲所有這些圖像指定max-width和max-height。不需要JavaScript。

#img-holder img { 
    max-width: 350px; 
    max-height: 350px; 
}

，或者保持比例：

#img-holder img { 
    max-width: 350px; 
    max-height: 350px; 
    width: auto; 
    height: auto; 
}

http://jsfiddle.net/mblase75/FKsL8/

來源

2013-04-11 15:01:45 Blazemonger

-1

你將不得不使用Ajax爲那一個。你可以設置一個按鈕來請求通過ajax鏈接到你的php文件。然後，當您獲取鏈接時，只需顯示您想要的鏈接即可。

來源

2013-04-11 15:02:03 Komlan

有很多方法可以實現您的需求。其中之一是你創建一個類模型「ShowImage」包括兩個屬性的寬度，高度，或者只是簡單的創建數組的圖像，你從SQL中獲取並傳遞到視圖。然後，您可以獲取每張圖片，並以您期望的尺寸顯示它們。

但我建議你不要這樣做。服務器端的東西就在服務器端，客戶端的東西在客戶端。

你可以用php做的事情就像你的函數Scale所做的一樣，因爲PHP有函數來獲得給定圖像的尺寸getimagesize。

最好的是你只需要一個函數來生成給定最大尺寸的縮略圖，這樣你就可以重新使用它，你不會擔心圖像周圍的東西了。

有許多功能，處理縮略圖的東西，你可以找到如here < <

我不鼓勵通過CSS製作，在實踐中，你真的不希望您的網頁加載所有大圖像&只顯示了350px。

來源

2013-04-11 15:24:43

動態jQuery函數與PHP

回答

相關問題