tags:

views:

263

answers:

6

I was just wondering how I can make thumbnails of images stored in hdd and use them in an html page, also I need the thumbnails to be able to enlarge (to their original size) if clicked on preferably inside a div tag on the same page, I would appreciate if anyone could put me in the right direction

thanks

+2  A: 

The gd library allows you to manipulate images. You will find an article to generate thumbnails here.

If you want to allow your users to view the thumbnail and the original size, the best way is to keep the two versions. And to display either one or the other.

Damien MATHIEU
A: 

You can use the GD library in PHP to load and resize your images to generate the thumbnails

http://us.php.net/manual/en/image.examples.php

rikh
A: 

Lookup the PECL extension Imagick. It's usually installable with standard package-managers.

http://se2.php.net/Imagick

You can either dynamically create the thumbnails and serve them using .php files (slow) or make a thumbnail-copy that you store on the server (prefered)

jishi
+3  A: 

You will need the GD extension enabled. The following code will create a thumbnail file in a subdirectory called ~tmb for a JPEG, PNG and GIF file:

$invalid = true;
if ($file != '.' and $file != '..') {
    if (filetype($path_abs.$file) == "file") {
        $ext = strtolower(substr($file,strrpos($file,'.')+1));
        if ($ext == 'jpg' || $ext == 'jpeg') {
            $origimg = @imagecreatefromjpeg($path_abs.$file);
        } elseif ($ext == 'png') {
            $origimg = @imagecreatefrompng($path_abs.$file);
        } elseif ($ext == 'gif') {
            $origimg = @imagecreatefromgif($path_abs.$file);
        }
        if ($origimg !== false) {
            $nheight = 0;
            $nwidth = 0;
            $use_orig = false;
            if ($width<=160 and $height<160) {
                $nwidth = $width;
                $nheight = $height;
                $use_orig = true;
                $invalid = false;
            } else {
                if ($width>$height and $width>0) {
                    $nheight = intval((160 / $width) * $height);
                    $nwidth = 160;
                } elseif ($height>0) {
                    $nwidth = intval((160 / $height) * $width);
                    $nheight = 160;
                } else {
                    $image = false;
                }
                if ($nheight > 0 and $nwidth > 0) {
                    $newimg = imagecreatetruecolor($nwidth, $nheight);
                    $bgc = imagecolorallocate ($newimg, 238, 238, 238);
                    imagefilledrectangle ($newimg, 0, 0, $nwidth, $nheight, $bgc);
                    if (@imagecopyresampled($newimg, $origimg, 0, 0, 0, 0, $nwidth, $nheight, $width, $height)) {
                        $image = imagejpeg($newimg, $path_abs.'~tmb/'.$file);
                        $invalid = false;
                    } elseif (@imagecopyresized($newimg, $origimg, 0, 0, 0, 0, $nwidth, $nheight, $width, $height)) {
                        $image = imagejpeg($newimg, $path_abs.'~tmb/'.$file);
                        $invalid = false;
                    }
                }
            }
        }
    }
}
if (!$invalid) {
    if ($use_orig) {
        echo '<img src="'.$file.'" alt="" />';
    } else {
        echo '<img src="~tmb/'.$file.'" alt="" />';
    }
} else {
    echo '<p>Error for file '.$file.'</p>';
}

In the above code, it resizes them to 160x160, though maintaining aspect ratio.

Paul Lammertsma
Note the background color (`$bgc`): for my purpose, I needed it to match the site style. You should also take some care for the file string that is supplied, ensuring the script can't exit the image path.
Paul Lammertsma
A: 

the best way I found is to use the phpThumb class (http://phpthumb.sourceforge.net/).

It has everything you need and more, including caching, filters, watermarks and other cool stuff. Just look at the demo page.

TheBrain
A: 

maxImageUpload is useful for creating thumbnails, normal image with an original image.

You can use jQuery to enlarge the thumbnail image.

paulrajj