Bigger Image

[Salchester]

Hi There,

Using the following code, how do I display a bigger versions of the thumbnail image, upon the thumbnail being clicked?

<link rel="stylesheet" type="text/css" href="Index.css" />
 
<?php
$con = mysql_connect("localhost","peter","abc123");
if (!$con)
{
  die('Could not connect: ' . mysql_error());
}
 
mysql_select_db("Gallery", $con);
 
$result = mysql_query("SELECT * FROM Images");
 
while($row = mysql_fetch_array($result))
{
  echo '<img class="Thumbnails" src="' . $row['Path'] . '" />';
}
 
mysql_close($con);
?>

[wheeler]

while($row = mysql_fetch_array($result))
{
  $pic = $row['Path'];  
  echo '<a href="'.$pic.'"><img class="Thumbnails" src="' . $pic . '" /></a>';
} 

I don't see how you are constraining the size of this image (unless with css) so this leads me to believe you are already viewing the full-size image.

[Salchester]

while($row = mysql_fetch_array($result))
{
  $pic = $row['Path'];  
  echo '<a href="'.$pic.'"><img class="Thumbnails" src="' . $pic . '" /></a>';
} 

I don't see how you are constraining the size of this image (unless with css) so this leads me to believe you are already viewing the full-size image.

Constraining the size of what image, the thumbnail?

[Raju Gautam]

Where is your full sized picture stored? Is it in different path than the thumbnail? From where you will have the large image? Just put your large image path in your the link like this:

while($row = mysql_fetch_array($result)){
  $pic = $row['Path'];
$largeimage = "./largeimage/".$row['Path'];
  echo '<a href="'.$largeimage.'"><img class="Thumbnails" src="' . $pic . '" /></a>';
} 

If you want to see the large image in pup up then :

echo '<a href="javascript:void(null);" onClick="window.open(\'' . $largeimage . '\',\'MyImage\',\'width=600,height=500\'"><img class="Thumbnails" src="' . $pic . '" /></a>'; 

You can find the width and height of the pop up window with to fit the image width and height with getimagesize() function.

[Salchester]

Where is your full sized picture stored? Is it in different path than the thumbnail? From where you will have the large image? Just put your large image path in your the link like this:

while($row = mysql_fetch_array($result)){
  $pic = $row['Path'];
$largeimage = "./largeimage/".$row['Path'];
  echo '<a href="'.$largeimage.'"><img class="Thumbnails" src="' . $pic . '" /></a>';
} 

If you want to see the large image in pup up then :

echo '<a href="javascript:void(null);" onClick="window.open(\'' . $largeimage . '\',\'MyImage\',\'width=600,height=500\'"><img class="Thumbnails" src="' . $pic . '" /></a>'; 

You can find the width and height of the pop up window with to fit the image width and height with getimagesize() function.

How do I get PHP to automatically create thumbnails from pictures that have been upload, instead of uploading a Thumbnail Image and full size image.

[Raju Gautam]

Ahh. Please have a look on this class.

class ImageUpload{
    
    var $ArrImageType;
    var $picpath;
    var $thumbpath;
    var $maxwidth;
    var $thumbwidth;
    var $thumbheight;

    var $tablename;
    var $imagefieldname;
    
    function __construct(){
        $this->ArrImageType = array('image/gif', 'image/jpeg', 'image/jpg', 'image/pjpeg', 'image/png');
    }
    function Create_ThumbNail($ImageType, $rW, $rH, $imagename, $do="thumbnail"){
        $full_picmain = $this->picpath . "/" . $imagename;
        if($do != "thumbnail")
            $tsrc = $this->picpath . "/$imagename";
        else
            $tsrc = $this->thumbpath . "/$imagename";
        # Starting of GIF thumb nail creation #
        if($ImageType == "image/gif"){
            $im = imagecreatefromgif($full_picmain);
            $width = imagesx($im);                # Original picture width is stored
            $height = imagesy($im);               # Original picture height is stored
            if($width > $rW){$n_width = $rW;}
            else{$n_width = $width;}
            if($height > $rH){$n_height = $rH;}
            else{$n_height = $height;}
            
            $newimage = imagecreatetruecolor($n_width,$n_height);
            imagecopyresized($newimage, $im, 0, 0, 0, 0, $n_width, $n_height, $width,$height);
            if(function_exists("imagegif")) {
                header("Content-type: image/gif");
                imagegif($newimage, $tsrc);
            }
            elseif(function_exists("imagejpeg")) {
                header("Content-type: image/jpeg");
                imagejpeg($newimage, $tsrc);
            }
            chmod("$tsrc", 0777);
        }
        # starting of JPG thumb nail creation #
        if($ImageType == "image/pjpeg" || $ImageType == "image/jpeg" || $ImageType == "image/jpg"){
            $im = imagecreatefromjpeg($full_picmain);
            $width = imagesx($im);              # Original picture width is stored
            $height = imagesy($im);             # Original picture height is stored
            if($width > $rW){$n_width = $rW;}
            else{$n_width = $width;}
            if($height > $rH){$n_height = $rH;}
            else{$n_height = $height;}
        
            $newimage = imagecreatetruecolor($n_width,$n_height);                 
            imagecopyresized($newimage, $im, 0, 0, 0, 0, $n_width, $n_height, $width, $height);
            imagejpeg($newimage, $tsrc);
            chmod("$tsrc", 0777);
        }
        # starting of JPG thumb nail creation #
        if($ImageType == "image/png"){
            $im = imagecreatefrompng($full_picmain); 
            $width = imagesx($im);              # Original picture width is stored
            $height = imagesy($im);             # Original picture height is stored
            if($width > $rW){$n_width = $rW;}
            else{$n_width = $width;}
            if($height > $rH){$n_height = $rH;}
            else{$n_height = $height;}
            $newimage = imagecreatetruecolor($n_width,$n_height);                 
            imagecopyresized($newimage, $im, 0, 0, 0, 0, $n_width, $n_height, $width, $height);
            imagepng($newimage, $tsrc);
            chmod("$tsrc", 0777);
        }        
    }
    function Upload($PicFile){
        if(is_uploaded_file($PicFile['tmp_name'])){
            if($PicFile['size'] < 1048576 && in_array($PicFile['type'], $this->ArrImageType)){
                $imgExt = $this->GetImageExtention($PicFile['type']);
                $PicName = substr(md5(time()), rand(0, 26), 6) . "." . $imgExt;
                $PicFullPathName = $this->picpath . "/" . $PicName;
                if(move_uploaded_file($PicFile['tmp_name'], $PicFullPathName)){
                    $this->Create_ThumbNail($PicFile['type'], 100, 80, $PicName, "thumbnail"); # Create thumbnail image 
                    list($width, $height) = getimagesize($PicFullPathName);
                    if($width > $this->maxwidth){ # default size.
                        $ratio = (($width - $this->maxwidth) * 100) / $width;
                        $newheight = $height - ($ratio * $height / 100);
                        $this->Create_ThumbNail($PicFile['type'], $this->maxwidth, $newheight, $PicName, "resize"); # resizing the image
                    }
                    mysql_query("INSERT INTO " . $this->tablename . " SET " . $this->imagefieldname . "='$PicName'") or die(mysql_error());
                }
            }
        }# is picture uploaded
    }
    # Get image extention #
    function GetImageExtention($type){
        if($type == "image/jpeg" || $type == "image/jpg" || $type == "image/pjpeg")
            return "jpg";
        elseif($type = "image/png")
            return "png";
        elseif($type == "image/gif")
            return "gif";
    }
}
$obj = new ImageUpload;

$obj->maxwidth             = 600;                        # Maximum large image size
$obj->thumbwidth         = 150;                        # Thumbnail width
$obj->thumbheight         = 150;                        # Thumbnail height
$obj->picpath             = './uploads';                 # Large image path
$obj->thumbpath         = './uploads/thumbnails';     # Thumbnail path

$obj->tablename         = "tblproductimages";        # table name
$obj->imagefieldname     = "ProductImagePath";        # field name that stores imagename

$PicFile = $_FILES['PrdImg'];

$obj->Upload($PicFile); 

I made this class for myself. Please change it to your requirement. There it is with example.