0

我有一个 jQuery 函数，可以缩放图片，以便最大尺寸为 350 像素，无论原始大小如何。

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']每次循环运行时都会存储图片链接。

我的问题：如何为使用循环检索的每张图片运行 jQuery 脚本？

4

3 回答 3

2

为所有此类图像分配max-width和max-height在您的 CSS 中。无需 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-11T15:01:45.253 回答
0

有很多方法可以实现您的需求。其中之一是您创建一个类模型“ShowImage”，包括两个属性宽度、高度，或者只是简单地创建从 SQL 获得并传递给视图的图像数组。然后您可以获取每张图片并以您的预期尺寸显示它们。

但我建议你不要这样做。只需将服务器端的东西放在服务器端，客户端的东西放在客户端。

你可以用 php 做一些事情，就像你的函数 Scale 所做的那样，因为 php 有函数来获取给定图像的尺寸getimagesize。

最好的是您只需要一个生成具有给定最大尺寸的缩略图的功能，因此您可以重复使用它，您将不再担心图像周围的这些东西。

您可以找到很多处理缩略图的函数，例如这里 <<

我不鼓励使用 CSS 制作，在实践中，您真的不希望您的页面加载所有大图像并仅以 350 像素显示它们。

于 2013-04-11T15:24:43.697 回答
-1

您将不得不为此使用Ajax。您可以设置一个按钮，通过 ajax 请求链接到您的 php 文件。然后，当您取回链接时，您将随心所欲地显示它。

于 2013-04-11T15:02:03.260 回答