Jump to content

W3 Schools Css Gallery Adapted For Php Use

Borderline

By Borderline
in PHP

Recommended Posts

Borderline Newbie

Borderline

Posted
Posted

Hi everyoneI've used the CSS photo gallery tutorial produced on W3 Schools - great tutorial, easy to understand (hurrah!). I've adapted the code slightly, so that the thumbnails and urls are collected from a database to be displayed. All well and good so far, though if anyone has improvements for the code, obviously glad and interested to hear them.The problem I'm having now, is paginating the results, so that I get about 12 results per page. I have tried googling for tutorials, but the bulk of the search results haven't related to images. Any adaptions I've made have failed miserably, and if I'm honest, the code is not something I fully understand when playing with it. Bad start, I know. Additionally, these results have been table based - can pagination be used with the CSS gallery I have?I was wondering therefore, whether someone could point me in the right direction, in terms of advice or tutorials that would help me achieve the effect? I'm looking for a pagination solution that will allow me to determine how many images are displayed on each page, and adapt the links created with CSS.The code I'm working with is below. Any advice greatfully received.Charlie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><link rel="stylesheet" type="text/css" href="http://www.equinefocus.co.uk/style/20090405.css"/><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Equine Focus Photography</title></head> <body><?php	// 	Connects to your Database  		mysql_connect("*****", "*****", "*****") or die(mysql_error());  		mysql_select_db("*****") 		or die ("Unable to connect to MySQL");	// mysql		$data = mysql_query("SELECT * FROM `*****` WHERE date = '2009-03-21'") or die 		("No data available, please contact the site admin describing where you found this error message.");  		?><?php		while($info = mysql_fetch_array($data)) {  			// images		$thumb='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];		$url='/photos/'.$info['date'].'/'.$info['url'];		$ref = $info['date'].'-'.$info['ref'];?>		<div class='img'>				<a href="<?php echo $url;?>"><img src="<?php echo $thumb; ?>"</a>				<div id='refno'><?php echo $ref; ?></div>				<div id='info'><?php echo $info['horse']; ?></div>				<div id='info'><?php echo $info['rider']; ?></div>		</div><?php}  ?></body></html>

CSS:

div.img{	margin: 10px;	border: 0px solid #000000;	height: auto;	width: 150px;	float: left;	text-align: center;	font: 80% arial, sans-serif;	background:silver;	padding: 5px;}	div.img img{	display: inline;	margin: 3px;	border: 1px solid #000000;}#refno	{font-weight: bold;}

Current result*: http://www.equinefocus.co.uk//photos/2009-03-21/gallery2.php* Appreciate it's not pretty yet, but want to get it working properly before playing with it too drastically.

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Pagination is the same regardless of what content you're printing, whether it's images or anything else. The basic concept is that you need to send the page number to the script, so the next and back links need to include the page number. The page will check for a page number and use 1 if it didn't find one. For the SQL statement, you can use a LIMIT clause to only get the set of images for that page. You can add this line to get the page number:

$page = (isset($_POST['page']) ? intval($_POST['page']) : (isset($_GET['page']) ? intval($_GET['page']) : 1));if ($page < 1) $page = 1;

That line will set $page to whatever was passed in $_POST or $_GET, otherwise it will use 1. The limit clause will need the record number to start at and the number of records to show.

$per_page = 12;$data = mysql_query("SELECT * FROM `*****` WHERE date = '2009-03-21' LIMIT " . (($page - 1) * $per_page) . ', ' . $per_page);

And that's it, pagination that has nothing to do with images specifically, it's just general pagination. To show the links, you just need to know which page to put on the link. e.g.:

<a href="index.php?page=<?php echo $page - 1; ?>">Previous</a><a href="index.php?page=<?php echo $page + 1; ?>">Next</a>

There's some additional code if you want to count how many images there are and divide by the number per page to figure out how many pages there are total.

Link to comment
Share on other sites
Borderline Newbie

Borderline

Posted
  • Author
Posted

Many thanks for the speedy response - every tutorial I've looked at on the subject addes so many lines to the code, was pleasantly surprised at the size of your solution!I'm experiencing the following error message as a result of the changes, which I understand is likely to be a sql error.

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/fhlinux177/e/equinefocus.co.uk/user/htdocs/photos/2009-03-21/gallery3.php on line 27Previous Next
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><link rel="stylesheet" type="text/css" href="http://www.equinefocus.co.uk/style/20090405.css"/><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Equine Focus Photography</title></head> <body><?php	// 	Connects to your Database  		mysql_connect("*****", "*****", "*****") or die(mysql_error());  		mysql_select_db("*****") 		or die ("Unable to connect to MySQL");	// mysql		$per_page = 12;		$data = mysql_query("SELECT * FROM `*****` WHERE date = '2009-03-21' LIMIT " . (($page - 1) * $per_page) . 		', ' . $per_page); 		?>[color="#FF0000"]<?php		while($info = mysql_fetch_array($data)) {  [/color]			// images		$page = (isset($_POST['page']) ? intval($_POST['page']) : (isset($_GET['page']) ? intval($_GET['page']) : 1));		if ($page < 1) $page = 1;		$thumb='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];		$url='/photos/'.$info['date'].'/'.$info['url'];		$ref = $info['date'].'-'.$info['ref'];?>		<div class='img'>				<a href="<?php echo $url;?>"><img src="<?php echo $thumb; ?>"</a>				<div id='refno'><?php echo $ref; ?></div>				<div id='info'><?php echo $info['horse']; ?></div>				<div id='info'><?php echo $info['rider']; ?></div>		</div><?php}  ?><a href="index.php?page=<?php echo $page - 1; ?>">Previous</a><a href="index.php?page=<?php echo $page + 1; ?>">Next</a></body></html>

Wasn't entirely sure where to place the information in your first code box, could the location of this have caused the problems?

Link to comment
Share on other sites
Borderline Newbie

Borderline

Posted
  • Author
Posted

Super, thank you so much! I have the initial page with 12 images - result!I click next, though, and get a blank page. Do I need to produce further code to define images to be displayed on page 2+?Edited: Also, on page 1, the previous button appears. Presumably it is possible to remove this option completely on page one, since there is ntohing before it. This may depend on any advice you have for the above question though. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...