Question

以facebook gallery为例。我首先有一个拇指图像，然后当用户点击它时，图像预览会显示，其中包含大图像。我应该保存拇指图像和大图像的图像，然后我通过不同的文件访问它或只是有原始图像并使用html宽度和高度控制其大小，但我想让图像具有其原始大小比例但是，最大的高度或宽度不能超过我的容器高度或宽度。

Answer 1

如果您使用一个图像并将其作为缩略图，则缩略图将需要更长时间才能加载，因为它是完整的图像文件。这就是我们使用较小分辨率图像作为缩略图的原因。您可以编写自己的函数来生成具有所需高度和宽度的缩略图或原始图像。

看看这个tread它展示了如何在php中编写缩略图生成器功能。

Facebook只通过点击缩略图并在影院（模态）模式下打开它，即可通过ajax加载完整的大图像。

底线：您可以更好地创建原始完整长度图像的缩略图，并将其存储为不同的文件。这有助于更快地加载图库页面，因为它只有低分辨率的拇指，并且点击加载全长图像。

修改发现这个用PHP编写的代码用于创建图像的缩略图，

<?php function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth ) { // open the directory $dir = opendir( $pathToImages ); // loop through it, looking for any/all JPG files: while (false !== ($fname = readdir( $dir ))) { // parse path for the extension $info = pathinfo($pathToImages . $fname); // continue only if this is a JPEG image if ( strtolower($info['extension']) == 'jpg' || strtolower($info['extension']) == 'jpeg' ) { echo "Creating thumbnail for {$fname} <br />"; // load image and get image size $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" ); $width = imagesx( $img ); $height = imagesy( $img ); // calculate thumbnail size $new_width = $thumbWidth; $new_height = floor( $height * ( $thumbWidth / $width ) ); // create a new temporary image $tmp_img = imagecreatetruecolor( $new_width, $new_height ); // copy and resize old image into new image imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height ); // save thumbnail into a file imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" ); } } // close the directory closedir( $dir ); } // call createThumb function and pass to it as parameters the path // to the directory that contains images, the path to the directory // in which thumbnails will be placed and the thumbnail's width. // We are assuming that the path will be a relative path working // both in the filesystem, and through the web for links createThumbs("upload/","upload/thumbs/",100); ?>

参考：create_thumbnail_images

Answer 2

您可以使用这两种方法：

<img src="<path_to_full_image>" onclick="show_full(this)" /> + css调整图片大小以适合您的容器

或

<a href="<path_to_full_image>" onclick="show_full(this)"><img src="<path_to_thumb>" /></a> 功能永远都是这样的

function show_full(image) {
    // now image variable is your image or link
    var full_image_ path = this.getAttribute('src');
    // for <img> tag
    var full_image_ path = this.getAttribute('href');
    // for link
    // now you have path to full image and can insert it in popup or anywhere else
}

当然，你必须首先生成缩略图并将其存储在某个地方，第二种方式会更快地工作，因为浏览器必须加载权重较小的图像

提示查看colorbox或fancybox

单击时如何调整拇指图像的大小

2 个答案: