动态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

回答

相关问题