用PHP实现动态jQuery函数

Question

我得到了一个jQuery函数，它可以缩放图片，因此最大的测量值是350 no，而不管原始大小如何。

jQuery：

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循环从我的数据库中检索图片链接。

PHP：

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

然后，每次循环运行时，图片链接将被存储为$r['picture']。

My problem:如何对循环检索的每一张图片运行jQuery脚本？

Answer 1

在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/

Answer 2

有很多方法来满足你的需求。其中之一是创建一个类模型"ShowImage“包括两个属性宽度、高度或简单的是创建从SQL获得并传递到视图的图像数组。然后，您可以获取每个图像，并以您期望的大小显示它们。

但我建议你不要那样做。只留下服务器端的东西在服务器端，客户端的东西在客户端。

您可以对php做精确的事情，就像您的函数规模所做的一样，因为php有函数来获取给定图像地理尺寸的维数。

最好是你只需要一个功能，生成的缩略图与给定的最大大小，所以你可以收回它，你不会再担心这样的东西周围的图像。

有很多处理缩略图内容的函数，比如这里 <<。

我不鼓励用CSS制作，在实践中，您真的不希望页面加载所有的大图片&只需在350 up之前显示它们。

Answer 3

为此，您必须使用Ajax。您可以设置一个按钮，通过ajax将链接请求到您的php文件。然后，当你得到的链接回来，你会只是显示，无论你想要它。