SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Bigger Image

  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bigger Image

    Hi There,

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

    Code PHP:
    <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);
    ?>

  2. #2
    SitePoint Wizard wheeler's Avatar
    Join Date
    Mar 2006
    Location
    Gold Coast, Australia
    Posts
    1,369
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    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.
    Studiotime - Time Management for Web Developers
    to-do's, messages, invoicing, reporting - 30 day free trial!
    Thomas Multimedia Web Development

  3. #3
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wheeler View Post
    PHP Code:
    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?

  4. #4
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    PHP Code:
    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 :
    PHP Code:
    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.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  5. #5
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rajug View Post
    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:
    PHP Code:
    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 :
    PHP Code:
    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.

  6. #6
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh. Please have a look on this class.
    PHP Code:
    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$im0000$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$im0000$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$im0000$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(026), 6) . "." $imgExt;
                    
    $PicFullPathName $this->picpath "/" $PicName;
                    if(
    move_uploaded_file($PicFile['tmp_name'], $PicFullPathName)){
                        
    $this->Create_ThumbNail($PicFile['type'], 10080$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.
    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •