[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 196
  • Last Modified:

Have a table with images and text links to the images from a sql db

I would like to make a table with thumbnails of images with links to the hi res and low res downloads.  The site is allready working but it is setup to only download the hi res by clicking on the thumbnail.  I would like for the page to have a 25 images on  a 5X5 table with the link for the hi res and low res located underneath  the image so the table might need to be 5 wide and 15 high.  I know some php and some html but I cant figure out how to make the table appear like this                                              ------   -------   -------  ------- -------
                                                                                              |      |   |       |  |       |  |      | |       |
                                                                                              |      |   |       |  |       |  |      | |       |
                                                                                              -------   -------   -------   ------  -------
                                                                                              hi res   hi res   hi res   hi res  hi res
                                                                                             low res low res lowres lowres lowres


repeated 5 times now but will need to increase when there are more images added.  
Thanks
0
pcsonwheels
Asked:
pcsonwheels
  • 5
  • 3
  • 3
1 Solution
 
Loganathan NatarajanLAMP DeveloperCommented:

I would like for the page to have a 25 images on  a 5X5 table with the link for the hi res and low res located underneath  the image so the table might need to be 5 wide and 15 high.  I know some php and some html but I cant figure out how to make the table appear like this        

>> you can do this with php, first define row + column count (5*5) ... and then use "for ...loop" ... draw the table structure to do display it., .. dynamically write down the <tr> as  well as <td> ...

then inside display the photos with links...


0
 
SatelliteCreativeCommented:
I just knocked up something that I think demonstrates what I think loqudotcom is saying you should do... in principle.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style>
.tabcell {background-color:#CCC;}
#fivebyfivetable {background-color:#000000;}
</style>
</head>
<body>
 
<table cellspacing="1" cellpadding="3" id="fivebyfivetable">
<tr>
<?
$colcount=0;
$cellcount=0;
 
while ($cellcount < 25) {
	if ($colcount > 4) {
		echo "</tr><tr>";
		$colcount=0;
	}
	echo '<td class="tabcell">Col: '.$colcount.'<br />Cell: '.$cellcount.'<br />Picture here<br />hi-res link<br />lo-res link</td>';
	$colcount++;
	$cellcount++;
}
?>
</tr>
</table>
</body>
</html>

Open in new window

0
 
SatelliteCreativeCommented:
Sorry I submitted that before I'd finished explaining what it does:

The $cellcount figure represents the data that you pull back from your database, so if you query it with a limit of 25, you can then use something like:

$result = mysql_query('SELECT stuff FROM db LIMIT 0,25');
while ($row = mysql_fetch_array($result)) {

in place of 'while ($cellcount < 25) {'

Actually.. it'll take a bit more tweaking than that but I wanted to show you the principle. Sorry if I've thrown you into utter confustion...
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
pcsonwheelsAuthor Commented:
Here is a portion of the code that I am using.  If the portion  

<br/><a href="#">HI SPEED<br /></a><a href="#">Low SPEED<br /></a>

is removed then them pictures show in a 5x5 table once the other data is added the pictures show up in a 1x15(picture, hi res, low res, picture...)
<?php
	$query_pics =
		"select m.is_high, m.pic_filename
		 from m_episodes_pics m
		 where m.ep_id = " . $row_eps['ep_id'] . "
		 order by m.is_high desc, m.pic_filename";
	$result_pics = @mysql_query($query_pics);
	if (! $result_pics) {
		exit;
	}
 
	$hi_row_no = 0;
 
	while ($row_pics = @mysql_fetch_array($result_pics)) {
			$hi_row_no++;
 
		if (($hi_row_no % 5) == 1) {
			if ($hi_row_no > 1) {
				echo "</tr>";
			}
			   echo "<tr>";
		}	?>
			<a href="<?php echo $row_eps['ep_dir'] ."/pic/high/". $row_pics['pic_filename']; ?>"  target="_blank"><img src="<?php echo $row_eps['ep_dir'] ."/pic/thumbnails/" . $row_pics['pic_filename']; ?>" alt="<?php echo "picture #" . $pic_row_no; ?>" alt="" width="126" height="95" border="0"></a><br/><a href="#">HI SPEED<br /></a><a href="#">Low SPEED<br /></a>
			<?php
	}
                 echo "</tr>";
	?>
                     </td>
  </tr>
 </table>
	<?php
}
?>

Open in new window

0
 
SatelliteCreativeCommented:
Hi, straight away it looks like the links are being written out to page between two TR tags, so this might be the problem. Could you please try and add TD tags to the begining and end of tha line with all the links in it?

Plus that </td> at the end of your code snippet seems to be out of place. It looks like your table ends with "</tr></td></table>" which cant be right.

If you want to paste the rest of your code (so we can see where the <table> is started then we might be able to fix it an post if back to you complete.

Cheers, Ben
0
 
pcsonwheelsAuthor Commented:
Hi Ben,
I got is to work with this code, thanks for your help.

<?php
	$query_movs =
		"select m.is_high, m.mov_filename
		 from m_episodes_movs m
		 where m.ep_id = " . $row_eps['ep_id'] . "
		 order by m.is_high desc, m.mov_filename";
	$result_movs = @mysql_query($query_movs);
	if (! $result_movs) {
		exit;
	}
 
	$hi_row_no = 0;
 
	while ($row_movs = @mysql_fetch_array($result_movs)) {
			$hi_row_no++;
 
		if (($hi_row_no % 5) == 1) {
			if ($hi_row_no > 1) {
				echo "</tr><br/>";
			}
			   echo "<tr>";
		}	?>
			<td colspan="5" align="center"><img src="<?php echo $row_eps['ep_dir'] ."/mov/thumbnails/" . $row_movs['mov_filename'] .".jpg"; ?>" alt="<?php echo "picture #" . $pic_row_no; ?>" alt="" width="126" height="188" border="0"><br/><a href="<?php echo $row_eps['ep_dir'] ."/mov/high/". $row_movs['mov_filename']; ?>" target="_blank">High Speed</a><br/><a href="<?php echo $row_eps['ep_dir'] ."/mov/low/". $row_movs['mov_filename']; ?>"  target="_blank">Low-Speed</a><br/></a></td>
												<?php
		}
 
			<?php
	}
	?>
                     </td>
  </tr>
 </table>

Open in new window

0
 
pcsonwheelsAuthor Commented:
I  am having another issue in another area of the web site.  if there are move that 50 images the php script that creates thumbnails for the images and precedes the file name with thu_ gets stuck in a loop and makes thumbnails for the thumbnails and precedes their name with thu_thu_ then thu_thu_thu_...which continues on for a long time until the script errors out saying the file name is too long.  The code is attached.  Should I make a new post for this question or continue on with this one?
Thanks Again
///////// Start the thumbnail generation//////////////
$add = "./members/" . $file_eps . "/pic/pix/" . $str; // source file
$n_width = 125; // Fix the width of the thumb nail images
$n_height = 167; // Fix the height of the thumb nail imaage
$tsrc = "./members/" . $file_eps . "/pic/pix/" . "thu_" . $str; // dest file
////////////// starting of JPG thumb nail creation//////////
$im = ImageCreateFromJPEG($add);
$width = ImageSx($im); // Original picture width is stored
$height = ImageSy($im); // Original picture height is stored
$newimage = imagecreatetruecolor($n_width, $n_height);
imageCopyResized($newimage, $im, 0, 0, 0, 0, $n_width, $n_height, $width, $height);
ImageJpeg($newimage, $tsrc);
chmod("$tsrc", 0777);
//////////////// End of JPG thumb nail creation //////////

Open in new window

0
 
SatelliteCreativeCommented:
Hi, It would be best to make a new post so people know you have a new problem and can try and help.
I'll look out for it and join in when you post it.

By the way, when you add it can you re-explain this bit:

"if there are move that 50 images the php script that creates thumbnails for the images and..."

I couldnt understand it.

Cheers, Ben
0
 
Loganathan NatarajanLAMP DeveloperCommented:
i would recommended to go through the code of displaying dynamically the photos with thumbnail as well different ROWS + COLUMNS limit...

just look at, http://coppermine-gallery.net/
0
 
Loganathan NatarajanLAMP DeveloperCommented:
0
 
SatelliteCreativeCommented:
Hi, I just had this email:

"The Asker has requested that this question be Closed, with the points refunded and one of the Asker's comments selected as the solution. If you object to this action, you have seven days to post a comment describing your objection. This will generate a request in Community Support for Moderator review. If no Expert objects, this question will be closed as described above"

I've not seen that before. I presume it's a mistake or that I've just missunderstood what it means. If it's not a mistake, which 'askers comment' is the solution? And does this mean that my answer will NOT be accepted and I will not get the points? What is the reason for this?

Cheers, Ben.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now