URGENT! Clickable thumbnail with mysql

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
qqjohn
Forum Newbie
Posts: 1
Joined: Sun Jan 05, 2003 11:58 am

URGENT! Clickable thumbnail with mysql

Post by qqjohn »

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!
danielw1
Forum Newbie
Posts: 6
Joined: Sun Jan 05, 2003 12:54 pm
Location: Kansas
Contact:

Post by danielw1 »

I've been working on an Art Gallery... if you want to view the whole thing, you can see it here:

ftp://www.smnw.com/art_gallery/

Here's the structure export for the MySQL:

Code: Select all

#
# Table structure for table `artists`
#

CREATE TABLE artists (
  name varchar(30) NOT NULL default '',
  year varchar(10) NOT NULL default 'Sophomore',
  pic blob,
  id int(11) NOT NULL auto_increment,
  PRIMARY KEY  (id)
) TYPE=MyISAM;
# --------------------------------------------------------

#
# Table structure for table `images`
#

CREATE TABLE images (
  title varchar(50) NOT NULL default 'Untitled',
  media varchar(20) NOT NULL default '',
  artist_id int(11) NOT NULL default '0',
  descr blob NOT NULL,
  archive tinyint(4) NOT NULL default '0',
  image blob NOT NULL,
  thumb blob NOT NULL,
  id int(11) NOT NULL auto_increment,
  PRIMARY KEY  (id)
) TYPE=MyISAM;
Now, I don't include support for separate image formats (i.e. gif's, etc) since this is something that a school will be using, and I've told them to only use jpg images (that's what they use anyway), but that's the general idea.

I think that what you're wanting to do is actually keep the same page, just change one thing. Now, if you want to be Microsoft-ish, you could use an internal frame. Elsewise, just have each thumbnail be a link back to the page, with an added variable of what large image you want. i.e. page.php?bigImageID=_____

Then, take bigImageID and make that the ID of the big image space.
Post Reply