URGENT! Clickable thumbnail with mysql
Posted: Sun Jan 05, 2003 11:58 am
What I´m trying to achieve, is to make a simple photo gallery. I want to store all my images in my mysql db. I don´t want to store the images in a directory!. I am able to display all the images from the db, but how do I display a larger image when someone click one of the thumbnails? I have made two tables in the db, one for the thumbnail and another one for the large image. My server don´t have the GD-library installed, so I have to do it this way!
After someone has clicked one of the thumbnails, I want the big image to appear on the same page.
First here is my mysql tables:
CREATE TABLE big_images (
id int(4) NOT NULL auto_increment,
bin_data longblob,
filename varchar(50) default NULL,
filesize varchar(50) default NULL,
filetype varchar(50) default NULL,
trollnr smallint(6) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;
CREATE TABLE binary_data (
id int(4) NOT NULL auto_increment,
description int(5) NOT NULL default '0',
bin_data longblob,
filename varchar(50) default NULL,
filesize varchar(50) default NULL,
filetype varchar(50) default NULL,
price smallint(6) NOT NULL default '0',
size_id tinyint(2) NOT NULL default '0',
condition_id tinyint(2) NOT NULL default '0',
trollnr smallint(6) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;
Here´s is the php code I use to display the thumbnails
<table width="723" border="0" cellspacing="0" cellpadding="0">
<?php
include 'db.inc';
$query = "SELECT * FROM binary_data WHERE size_id=1 ORDER BY trollnr ASC";
if (!($connection = mysql_pconnect($hostName,$username,$password)))
showerror();
if (!mysql_select_db("nyformtr", $connection))
showerror();
if (!($result = mysql_query ($query, $connection)))
showerror();
?>
<tr>
<td width="27"><img src="images/spacer.gif" width="27" height="1"></td>
<td width="30" align="left" valign="bottom"><img src="images/ruler.gif" width="30" height="233"></td>
<td width="259" align="center" valign="bottom"><div align="center">
// Here I want to display the big image
<?
echo "<img src=\"view.php?file={$row['id']}\"></a>";
?>
</div></td>
<td width="25"><img src="images/spacer.gif" width="25" height="20"></td>
<td height="18" valign="top">
<table align="right" border="0" cellspacing="0" cellpadding="0">
<?php
$num_rows=mysql_num_rows($result);
$col=4;
$rad=3;
if (!isset($pg))
{
$pg=0;
};
$count=$rad*$col*$pg;
for ($r=1; $r<=$rad; $r++)
{
?>
<tr>
<?php
if ($count>$num_rows-1) {break;};
for ($c=1; $c<=$col; $c++)
{
?>
<td>
<table width="10" border="0" cellspacing="0" cellpadding="7">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5"><img src="images/ramme_r1_c1.gif" width="5" height="4"></td>
<td width="70"><img src="images/ramme_r1_c2.gif" width="70" height="4"></td>
<td width="4"><img src="images/ramme_r1_c4.gif" width="4" height="4"></td>
</tr>
<tr>
<td><img src="images/ramme_r2_c1.gif" width="5" height="71"></td>
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" class="tiny"><div align="right"><?php
$row=mysql_fetch_array($result);
echo "{$row["trollnr"]}";?></div></td>
</tr>
<tr>
<td width="70" height="59">
<?php
echo "<a href='$php_self'><img src=\"view.php?file={$row['id']}\" border=0></a>"; $count++;
?>
</td>
</tr>
</table></td>
<td><img src="images/ramme_r2_c4.gif" width="4" height="71"></td>
</tr>
<tr>
<td><img src="images/ramme_r3_c1.gif" width="5" height="4"></td>
<td><img src="images/ramme_r3_c2.gif" width="70" height="4"></td>
<td><img src="images/ramme_r3_c4.gif" width="4" height="4"></td>
</tr>
</table></td>
</tr>
</table>
</td>
<?php
if ($count>$num_rows-1) {break;};
}
?>
</tr>
<?php
}
?>
</table>
</td>
<td width="27"><img src="images/spacer.gif" width="25" height="20"></td>
</tr>
</table>
As you can see, the images are displayed with the file "view.php". It´s like this:
<?php
include 'db.inc';
$file = clean($file, 4);
if (empty($file))
exit;
if (!($connection = mysql_pconnect($hostName,
$username,
$password)))
showerror();
if (!mysql_select_db("nyformtr", $connection))
showerror();
$query = "SELECT filetype, bin_data FROM binary_data
WHERE id = $file";
if (!($result = mysql_query ($query,$connection)))
showerror();
$data = mysql_fetch_array($result);
if (!empty($data["bin_data"]))
{
// Output the MIME header
header("Content-Type: {$data["filetype"]}");
// Output the image
echo $data["bin_data"];
}
?>
My big question is, how do I display the large image on the same page when someone click one of the thumbnails!
After someone has clicked one of the thumbnails, I want the big image to appear on the same page.
First here is my mysql tables:
CREATE TABLE big_images (
id int(4) NOT NULL auto_increment,
bin_data longblob,
filename varchar(50) default NULL,
filesize varchar(50) default NULL,
filetype varchar(50) default NULL,
trollnr smallint(6) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;
CREATE TABLE binary_data (
id int(4) NOT NULL auto_increment,
description int(5) NOT NULL default '0',
bin_data longblob,
filename varchar(50) default NULL,
filesize varchar(50) default NULL,
filetype varchar(50) default NULL,
price smallint(6) NOT NULL default '0',
size_id tinyint(2) NOT NULL default '0',
condition_id tinyint(2) NOT NULL default '0',
trollnr smallint(6) NOT NULL default '0',
PRIMARY KEY (id)
) TYPE=MyISAM;
Here´s is the php code I use to display the thumbnails
<table width="723" border="0" cellspacing="0" cellpadding="0">
<?php
include 'db.inc';
$query = "SELECT * FROM binary_data WHERE size_id=1 ORDER BY trollnr ASC";
if (!($connection = mysql_pconnect($hostName,$username,$password)))
showerror();
if (!mysql_select_db("nyformtr", $connection))
showerror();
if (!($result = mysql_query ($query, $connection)))
showerror();
?>
<tr>
<td width="27"><img src="images/spacer.gif" width="27" height="1"></td>
<td width="30" align="left" valign="bottom"><img src="images/ruler.gif" width="30" height="233"></td>
<td width="259" align="center" valign="bottom"><div align="center">
// Here I want to display the big image
<?
echo "<img src=\"view.php?file={$row['id']}\"></a>";
?>
</div></td>
<td width="25"><img src="images/spacer.gif" width="25" height="20"></td>
<td height="18" valign="top">
<table align="right" border="0" cellspacing="0" cellpadding="0">
<?php
$num_rows=mysql_num_rows($result);
$col=4;
$rad=3;
if (!isset($pg))
{
$pg=0;
};
$count=$rad*$col*$pg;
for ($r=1; $r<=$rad; $r++)
{
?>
<tr>
<?php
if ($count>$num_rows-1) {break;};
for ($c=1; $c<=$col; $c++)
{
?>
<td>
<table width="10" border="0" cellspacing="0" cellpadding="7">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="5"><img src="images/ramme_r1_c1.gif" width="5" height="4"></td>
<td width="70"><img src="images/ramme_r1_c2.gif" width="70" height="4"></td>
<td width="4"><img src="images/ramme_r1_c4.gif" width="4" height="4"></td>
</tr>
<tr>
<td><img src="images/ramme_r2_c1.gif" width="5" height="71"></td>
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" class="tiny"><div align="right"><?php
$row=mysql_fetch_array($result);
echo "{$row["trollnr"]}";?></div></td>
</tr>
<tr>
<td width="70" height="59">
<?php
echo "<a href='$php_self'><img src=\"view.php?file={$row['id']}\" border=0></a>"; $count++;
?>
</td>
</tr>
</table></td>
<td><img src="images/ramme_r2_c4.gif" width="4" height="71"></td>
</tr>
<tr>
<td><img src="images/ramme_r3_c1.gif" width="5" height="4"></td>
<td><img src="images/ramme_r3_c2.gif" width="70" height="4"></td>
<td><img src="images/ramme_r3_c4.gif" width="4" height="4"></td>
</tr>
</table></td>
</tr>
</table>
</td>
<?php
if ($count>$num_rows-1) {break;};
}
?>
</tr>
<?php
}
?>
</table>
</td>
<td width="27"><img src="images/spacer.gif" width="25" height="20"></td>
</tr>
</table>
As you can see, the images are displayed with the file "view.php". It´s like this:
<?php
include 'db.inc';
$file = clean($file, 4);
if (empty($file))
exit;
if (!($connection = mysql_pconnect($hostName,
$username,
$password)))
showerror();
if (!mysql_select_db("nyformtr", $connection))
showerror();
$query = "SELECT filetype, bin_data FROM binary_data
WHERE id = $file";
if (!($result = mysql_query ($query,$connection)))
showerror();
$data = mysql_fetch_array($result);
if (!empty($data["bin_data"]))
{
// Output the MIME header
header("Content-Type: {$data["filetype"]}");
// Output the image
echo $data["bin_data"];
}
?>
My big question is, how do I display the large image on the same page when someone click one of the thumbnails!