Img Gallery: How to make a larger image popup

frontlines

Hi. I'm dying here. I'm a total newb so I'll try to be as comprehensive as possible:

I'm building a catalog/image gallery type site for a t-shirt printer. You click on a catagory and the thumbnails come up in a results page. That's working fine. Now I need to know how you make it to when you click on a thumbnail a larger size version opens in a new, preferable chromeless, window. My database has information for the thumbs and the full size image so the information is THERE, I just don't know how to get it to display.

Thanks in advance for your help.

If you want to see what I've got so far you can check it out at http://www.wescomer.com/musicresults.php😕

litebearer

Here is the script I use to accomplish the same basic thing you are looking to do.

this is the php file

<?PHP
session_start(); 
header("Cache-control: private"); // IE 6 Fix. 
?>

<html>
<head>

<?PHP
##############################################
#
#  A popup window script to display the full image
#  when the thumbnail is clicked
#
##############################################

?>
<script language="Javascript"> 
function PopupPic(sPicURL) { 
window.open("popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}
</script>

<?PHP
#################################
# css file to control font size
#
# yes I know some people feel it is not
# proper to control font size
#
##################################

include ('text.css');
?>
</head>
<body>
<?PHP

##############################
#
# set the global variables
#
##############################

global $image_name; 	// this is the thumbnail url and name
global $image_name2;	// this is the full image url and name
global $artist_name;		// 
global $what_style;		// this sets the format of the thumbnail display
global $comments;		// this is the comments for an image
global $comments1;		// this is the truncated comments for an image

##############################
#
# define the table cell display function
#
##############################

function cell() {
  global $image_name;
  global $image_name2;
  global $artist_name;
  global $what_style;
  global $comments;
  global $comments1;
  if (strlen($comments) > 10) {
    $comments1 = substr($comments, 0, 10) . "...";
  } else {
    $comments1 = $comments;
  }
  if ($what_style == 1) {
    ?>
    <table border=1 style="border-collapse: collapse">
    <tr height=150><td colspan=2  align=center><IMG SRC="<? echo $image_name; ?>" width=140></td></tr>
    <tr><td  width=75 align=center><a href="">800</a></td><td  width=75 align=center><a href="">1024</a></td></tr>
    <tr><td colspan=2 align=center><a href=""><? echo $artist_name; ?></a></td></tr>
    </table>
    <?PHP
  }
  if ($what_style == 2) {
    ?>
    <table border=1  width=150 style="border-collapse: collapse">
    <tr height=150><td width=150 align=center><a href="javascript:PopupPic('<?PHP echo $image_name2; ?>')"><IMG SRC="<? echo $image_name; ?>" border=0></a></td></tr>
    <tr height=200><td  width=150 align=center><? echo $comments; ?></td></tr>
    </table>
    <?PHP
  }
  if ($what_style == 3) {
    ?>
    <table border=1 width=150 style="border-collapse: collapse">
    <tr height=150><td colspan=2  align=center><IMG SRC="<? echo $image_name; ?>" width=140></td></tr>
    <tr><td  width=75 align=center><a href="">800</a></td><td  width=75 align=center><a href="">1024</a></td></tr>
    <tr><td colspan=2 align=center><a href=""><? echo $artist_name; ?></a></td></tr>
    <tr><td colspan=2 align=center><? echo $comments1; ?></td></tr>
    </table>
    <?PHP
  }
  if ($what_style == 4) {
    ?>
    <table border=1  width=150 cellpadding=0 style="border-collapse: collapse">
    <tr height=150><td width=150 align=center><a href="javascript:PopupPic('<?PHP echo $image_name2; ?>')"><IMG SRC="<? echo $image_name; ?>" border=0></a></td></tr>
    <tr><td  width=150 align=center><? echo $comments1; ?></td></tr>
    </table>
    <?PHP
  }
  if ($what_style == 5) {
    ?>
    <table border=1  width=300 cellpadding=5 style="border-collapse: collapse">
    <tr height=150><td width=150 align=center valign=center><a href="javascript:PopupPic('<?PHP echo $image_name2; ?>')"><IMG SRC="<? echo $image_name; ?>" border=0></a></td><td  width=150 align=center valign=center><? echo $comments; ?></td></tr>
    </table>
    <?PHP
  }

  return;
}

################################
#
# set the table display style
#
################################

$what_style =4;

##############################
#
# set the number of images per page
#
##############################

$limit =6;

##############################
#
# set the number of images per row
#
##############################

$per_row = 3;

################################
#
# set the Display table title
#
################################

$table_header = "Our Family Album";


############################
# connect to the database
############################

include ('db.php');



$query_count = "SELECT * FROM our_fam_gallery"; 
$result_count = mysql_query($query_count); 
$totalrows = mysql_num_rows($result_count); 

if(empty($page)){
  $page = 1;
}

$limitvalue = $page * $limit - ($limit); 
$query = "SELECT * FROM our_fam_gallery LIMIT $limitvalue, $limit"; 
$result = mysql_query($query) or die("Error: " . mysql_error()); 
if(mysql_num_rows($result) == 0){ 
 echo("Nothing to Display!"); 
} 

?>
<center>
  <table>
    <tr>
      <td align=center colspan="<?PHP echo $per_row; ?>"><?PHP echo $table_header; ?></td></tr><tr>
<?PHP
$ixi = 0;
while($row = mysql_fetch_array($result)){
  if ($ixi < $limit) {
    if (($ixi % $per_row) == 0) {
      echo "</tr><tr>";
    }
    echo "<td>";
    $image_name = "./thumbs/" . $row['thumbpic'];
    $image_name2 = "./pics/" . $row['thumbpic'];
    $comments = $row['comments']; 
    cell();
    echo "</td>";
    $ixi ++;
  }
}
echo "</tr></table></center>";

echo "<center>";

if($page != 1){ 
$pageprev = $page -1; 

echo "<a href=\"$PHP_SELF?page=$pageprev\">PREV ".$limit." </a>&nbsp;"; 
}else{ 
echo("PREV " . $limit . "&nbsp;"); 
} 

$numofpages = ($totalrows / $limit); 

for($i = 1; $i <= $numofpages; $i++){ 
if($i == $page){ 
echo($i."&nbsp;"); 
}else{ 
echo("<a href=\"$PHP_SELF?page=$i\">$i</a>&nbsp;"); 
} 
} 


if(($totalrows % $limit) != 0){ 
if($i == $page){ 
echo($i."&nbsp;"); 
}else{ 
echo("<a href=\"$PHP_SELF?page=$i\">$i</a>&nbsp;"); 
} 
} 

if(($totalrows - ($limit * $page)) > 0){ 
$pagenext = $page + 1; 
echo("<a href=\"$PHP_SELF?page=$pagenext\">NEXT ".$limit."</a>"); 
}else{ 
echo("NEXT ".$limit); 
} 
echo "</center>";

mysql_free_result($result); 

?>

and this is the popup file (popup.htm)

<HTML> 
<HEAD> 
<TITLE>Our Family Photos</TITLE> 
<script language='javascript'> 
var arrTemp=self.location.href.split("?"); 
var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
var NS = (navigator.appName=="Netscape")?true:false; 

function FitPic() { 
iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
iWidth = document.images[0].width - iWidth; 
iHeight = document.images[0].height - iHeight; 
window.resizeBy(iWidth, iHeight); 
self.focus(); 
}; 
</script> 
</HEAD> 
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0" 
marginheight="0" leftmargin="0" marginwidth="0"> 
<script language='javascript'> 
document.write( "<img src='" + picUrl + "' border=0>" ); 
</script> 
</BODY> 
</HTML>

Hope it is of some help.

(here is a link to a sample of it in action)
http://nstoia.com/effie/gallery/

Lite...

frontlines

Thanks for your help. I have to say, however, that I'm a little confused how to use it. See I've already built the results page. You click on the category button and the thumbs all fill in already via a recordset bound to an image placeholder that repeats. Now what I want is a way to click on one of those thumbs and make another image (the same, only larger) display in a new window. It seems like what you've go there works, but I don't know how to implement it with what I already have. Any suggestions?

litebearer

The key to the popup is simply the popup.htm file and the appropriate link surrounding the thumbnail.

create and save this file as popup.htm (no changes necessary)

<HTML> 
<HEAD> 
<TITLE></TITLE> 
<script language='javascript'> 
var arrTemp=self.location.href.split("?"); 
var picUrl = (arrTemp.length>0)?arrTemp[1]:""; 
var NS = (navigator.appName=="Netscape")?true:false; 

function FitPic() { 
iWidth = (NS)?window.innerWidth:document.body.clientWidth; 
iHeight = (NS)?window.innerHeight:document.body.clientHeight; 
iWidth = document.images[0].width - iWidth; 
iHeight = document.images[0].height - iHeight; 
window.resizeBy(iWidth, iHeight); 
self.focus(); 
}; 
</script> 
</HEAD> 
<BODY bgcolor="#000000" onload='FitPic();' topmargin="0" 
marginheight="0" leftmargin="0" marginwidth="0"> 
<script language='javascript'> 
document.write( "<img src='" + picUrl + "' border=0>" ); 
</script> 
</BODY> 
</HTML>

put this in the header of your php page (no changes necessary)

<script language="Javascript"> 
function PopupPic(sPicURL) { 
window.open("popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200"); 
} 
</script>

in your php page use this snippet where ever you have an image/thumbnail that you want to be a link to the popup. Obviously, lines 2 and 4 are the ones you will need to modify to reflect your actual image names and paths.

<a href="java script:PopupPic('
<?PHP echo $image_name2; ?>
')"><IMG SRC="
<? echo $image_name; ?>
" border=0></a>

clear?

Lite...