troubleshooting Question

Attaching an image saved in MySql as a background-image instead of setting <img src

Avatar of febone
febone asked on
1 Comment1 Solution313 ViewsLast Modified:

I have a gallery page that displays the large image by attaching it as the background image to a styled <div> when you click on a  thumbnail..

<div id=viewer></div>

<script language="javascript" type="text/javascript">
function ShowImage(image,width,height){
      newimage='url(' + image + ')';
triggered as follows:
<div class="smallpic"><img onMouseover=" = 'hand'" onMouseout=" = 'auto'" onClick="ShowImage('1.jpg','264px','350px')" src="thumbs/1.jpg" /></div>

The situation:
I have to provide a databased solution with the images stored in MySql...
I can retrieve the saved images and display them using this code....

<div class=smallpic>
echo "<a href=get_image.php?id=2&image=5><img src=get_image_tn.php?app_id=2&image=5 border=\"0\"></a>";

which simply pops the image up in a browser window, but the design really calls for the image to display in the styled viewer div. If I could get something like this:

      echo "<script language=\"javascript\" type=\"text/javascript\">\n";
      echo "document.getElementById('viewer').style.backgroundImage=url(get_image.php?id=2&image=5);\n";
      echo "</script>";

(which throws the javascsript error "invalid assignment left-hand side") to work I am hoping I can simply rewrite my ShowImage function, but after a couple of days trying and researching figured I should simply ask! I played around with output buffering, but no luck there either.

Thanks for your help,

get_image.php is:

    require '../sqlconnect.php';

    $id = $_GET['id'];
      $image = $_GET['image'];
    $query = "SELECT image_name, image_type, image_size, image_file FROM application_images WHERE application_id = $id AND image_name = '$image' and flag_archived = 0";
    $result  = mysql_query($query) or die('Error, query failed');
    list($name, $type, $size, $content) = mysql_fetch_array($result);

//    header("Content-Disposition: attachment; filename=$name");
    header("Content-length: $size");
    header("Content-type: $type");
    echo $content;

For what its worth, the images are resized to a standard size and thumbnailed before saving in BLOB's with the following function, where $resizedFile is the saved content:

            function resize_image($tmpName, $fileType, $fileSize, $max_width, $max_height){
            /* Creates resized image file as global var $resizedFile */

                  global $resizedFile;
                  global $iFileWidth;
                  global $iFileHeight;
                  $vars = explode('/',$fileType);
                  $type = $vars[1];
                  $fp = fopen($tmpName, 'r');
                  $content = fread($fp, $fileSize);
                  $oSourceImage = imagecreatefromstring($content);
                  $x = imagesx($oSourceImage); // uploaded image width, pixels
                  $y = imagesy($oSourceImage); // uploaded image height, pixels
                  if($x==0 || $y==0)return $file='';
                  if ($x > $max_width || $y > $max_height){
                        if ($x > $y){
                              // wide..
                              if($x > $max_width){
                                    $newy = resize_height($x, $y, $max_width);
                        }elseif($y > $x){
                        //      tall..
                              if($y > $max_height){
                                    $newx = resize_width($x, $y, $max_height);
                              //      square..use smallest max size...
                              $newx = ($max_width > $max_height)? $max_height : $max_width;
                              $newy = $newx;
                        $newx = $x;
                        $newy = $y;

                  $oDestinationImage = imagecreatetruecolor($newx, $newy);
                  $oResult = imagecopyresampled( $oDestinationImage, $oSourceImage, 0, 0, 0, 0, $newx, $newy, $x, $y); // resize the image
                  ob_start(); // Start capturing stdout.
                              case "jpeg":
                              case "jpg":
                                    imagejpeg($oDestinationImage); // As though output to browser.
                              case "png":
                              case "gif":
                  $resizedFile = addslashes(ob_get_contents()); // the raw image data.
                  ob_end_clean(); //
                  $iFileWidth = $newx;
                  $iFileHeight = $newy;                  
                  return true;

Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 1 Comment.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros