PHP Scripts

Create a thumbnail from a larger image and popup the original

This assumes you have a large image stored at your website, and it is referenced in a MySQL database.
If you're not using MySQL, simply skip those sections that retrieve the reference image name.

We use html, php, and javascript to achieve what we want,
1. A small clickable image without manually creating a thumb
2. A popup window of the original large image

The problem with creating a thumbnail is that it needs image/jpeg as a header (file type identifier) for the browser.
Unfortunately the header's already been sent by the web page, and we can't send another. This is the error:

"Warning: Cannot modify header information - headers already sent"

One solution is to paste a thumbnail in a new page, and include the new page in our document.

In the example below we begin with an array, doublecheck we haven't lost any image names, check to see if any array is empty, check to see if in each array we have at least one image, and check that the files exist where they're supposed to be.

The database has been connected to, and we have a query result

[page][snip php code]

// access the database in the usual way and query
$num_rows = mysql_num_rows($more);

//detail is the folder for the large images
$src='<img src=http://your_wesbite/detail/';
$n=("nix");
$f='<font face=verdana,arial size=1 color=#898A89';
$s='<span style=padding-left:3px';
$i=0;
while ($i < $num_rows) {
$img1=mysql_result($more,$i,"image1");
$img2=mysql_result($more,$i,"image2");
$img3=mysql_result($more,$i,"image3");
++$i;
}

//lets see if the files physically exist

$j=".jpg";
$im1=($img1.$j);
$im2=($img2.$j);
$im3=($img3.$j);
if (file_exists($im1)) {
} else {
$img1="nix";
}
if (file_exists($im2)) {
} else {
$img2="nix";
}
if (file_exists($im3)) {
} else {
$img3="nix";
}
// have we lost ALL the image variables sometime?
$all = $img1 . $img2 . $img3;
if (empty($all))
{
echo "$f color=#666666>Sorry, the image reference folded into the matrix</font>";
} else {
if ($all == "nixnixnix") {
echo "$f color=#666666>Sorry, the image reference folded into the matrix</font>";
} else {
//are we missing any ONE variable ?
if (empty($img1)) $img1="nix";
if (empty($img2)) $img2="nix";
if (empty($img3)) $img3="nix";
//finally call the image table now we know 1 or more images exist
include "tn.php";
}
}
?>

This is tn.php

<?php

// set variable for our thumbnail conversion
//this is the file that does all the work, converting to a thumb the filename passed to it as im=(whatever name the tn pages below generate)

$th = '<IMG SRC="thumbnail.php?im=';
$x='">';

//find out the 3 files actually exist

if (file_exists($im1)) {
include "tn1.htm";
} else {
echo "$im2 has fallen into the matrix";

}
?><?php
if (file_exists($im2)) {
include "tn2.htm";
} else {
echo "$im2 has fallen into the matrix";
}
?>

</DIV></TD><TD WIDTH="34%"><DIV ALIGN="LEFT"> <?php
if (file_exists($im3)) {
include "tn3.htm";
} else {
echo "$im3 has fallen into the matrix";
}
?>

</DIV></TD><TD WIDTH="33%"><DIV ALIGN="LEFT">

tn1.htm

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<A HREF="javascript:popUp('tn11.php?i=<?php echo "$im1"; ?>')">

<?php
//$im is the large image
//$th is thumbnail.php which converts it to a thumb
echo "$th$im1$x";
?>
 </a></FONT></P>

tn2.htm

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<A HREF="javascript:popUp('tn22.php?i=<?php echo "$im2"; ?>')">

<?php
echo "$th$im2$x";
?>
 </a></FONT></P>

tn3.htm

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<A HREF="javascript:popUp('tn33.php?i=<?php echo "$im3"; ?>')">

<?php
echo "$th$im3$x";
?>
 </a></FONT></P>

This is tn11.php, the POPUP

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<?php
$a = '<IMG SRC="';
$x='">';
echo "$a$i$x";
?></FONT></P><P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1"><A HREF="javascript:window.close()">Close
this window</a></FONT> </P>

This is tn22.php, the POPUP

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<?php
$a = '<IMG SRC="';
$x='">';
echo "$a$i$x";
?></FONT></P><P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1"><A HREF="javascript:window.close()">Close
this window</a></FONT> </P>

This is tn33.php, the POPUP

<P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1">
<?php
$a = '<IMG SRC="';
$x='">';
echo "$a$i$x";
?></FONT></P><P><FONT FACE="Verdana, Arial, Helvetica, sans-serif" SIZE="1"><A HREF="javascript:window.close()">Close
this window</a></FONT> </P>

Finally, the thumbnail.php that generates the thumb is in the same directory as these files

 

 

Back