Php Gallery

Question

Borderline

15 Years Ago

I'm trying to develop a web gallery, but have been struggling with laying out the thumbnails, and paginating the results. I found a tutorial, but have been experiencing problems with it. Can anyone point me in the right direction?

Current result: http://www.equinefocus.co.uk//photos/2009-03-21/gallery.php

Current code:

<?php

	// 	Connects to your Database  
		mysql_connect("*****", "*****", "*****") or die(mysql_error());  
		mysql_select_db("*****") 
		or die ("Unable to connect to MySQL");

	// 	How many pictures to display on each page.
		$picsperpage = 12;

	// 	How many pictures to display per row.
		$picsperrow = 4;

	// images
		$thumb ='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];
		$url ='/photos/'.$info['date'].'/'.$info['url'];

	// 	If the page number is set...
		if(isset($_GET['p'])) {

    // 	$page is now the page number.
		$page = $_GET['p'];
		} else {

    // 	Otherwise the page is 1.
		$page = 1;
}

	// 	What the starting number will be for the query.
		$start = ($page - 1) * $picsperpage;

	// 	Counts all of the rows in the table.
		$res= @mysql_query("SELECT COUNT(id) AS numrows FROM photos") 
		or die("Sorry, but there was an error retrieving the gallery.");

	// 	Gets the number of rows from the array.
		$fetchres = @mysql_fetch_array($res, MYSQL_ASSOC) or die("Sorry, but there was an error retrieving the 
		gallery.");
		$numrows = $fetchres['numrows'];

	// 	How many pages there will be (total pictures / # of pictures per page).
		$totalpages = ceil($numrows/$picsperpage);
		echo '<ul>';

	// 	Echos our page numbers so that we can navigate.
		for($i=1; $i <= $totalpages; $i++) {
		if($i == $page) {

    // 	If it's the current page, don't make a link since we are already there.
        echo '<li>' . $i . '</i>';
		} else {

    // 	Make all other pages links.
        echo '<li><a href="main.php?p=' . $i . '">' . $i . '</a></li>';
    }
}
echo '</ul><br />

<div class="gallery">';

	// 	Get all of the pictures for the current page.          
		$allphotos = @mysql_query("SELECT * FROM photos LIMIT $start, $picsperpage") 
		or die("Sorry, but there was an error retrieving the gallery.");

	// 	How many pictures there are right now.
		$rowcount = 0;

	// 	For each row in the gallery table...
		while ($row = @mysql_fetch_array($allphotos)) {

    //	If $rowcount divided by $picsperrow has a remainder of 0...
		if (($rowcount % $picsperrow) == 0) {    
    
	// 	Make a <br /> tag with a clear both style, so that there is a new row of images
        echo '<br style="clear: both;" />';
    }

    // 	Displaying each image with this code.
		echo '<a href="' . $row['thumb']. '"><img src="' . $row['url']. '" /></a>';

    //	$rowcount + 1.
		$rowcount++;
}
	
	// 	After all the images are done, end the div.
		echo '</div>';    
?>

Attached is a screenshot of my current database table.

php

3 Contributors
7 Replies
191 Views
2 Days Discussion Span
Latest Post 15 Years Ago Latest Post by Will Gresham

Will Gresham 81 Master Poster

15 Years Ago

Looking at your code, I think you have your variables in a mix:

echo '<a href="' . $row['thumb']. '"><img src="' . $row['url']. '" /></a>';

Would output (for row 1)

<a href="001.jpg"><img src="001.php" /></a>

Swap over the variables so that the thumb is in the img tag and the url is in the a tag.

Borderline commented: Many thanks. +1

Will Gresham 81 Master Poster

15 Years Ago

Can you post the rest of your script?

I have setup a table on my database and a slightly modified script on the server and it works for me.

Here's the edited code

<?php
// Connects to your Database  
mysql_connect("***", "***", "***")or die(mysql_error());  
mysql_select_db("***")or die ("Unable to connect to MySQL");

// How many pictures to display on each page.
$picsperpage = 12;

// How many pictures to display per row.
$picsperrow = 4;

// images
$thumb ='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];
$url ='/photos/'.$info['date'].'/'.$info['url'];

// If the page number is set...
if(isset($_GET['p'])) {
	// $page is now the page number.
	$page = $_GET['p'];
} else {
	// Otherwise the page is 1.
	$page = 1;
}

// What the starting number will be for the query.
$start = ($page - 1) * $picsperpage;

// Counts all of the rows in the table.
$res= @mysql_query("SELECT COUNT(id) AS numrows FROM photos")or die("Sorry, but there was an error retrieving the gallery.");

// Gets the number of rows from the array.
$fetchres = @mysql_fetch_array($res, MYSQL_ASSOC)or die("Sorry, but there was an error retrieving the 
gallery.");
$numrows = $fetchres['numrows'];

// How many pages there will be (total pictures / # of pictures per page).
$totalpages = ceil($numrows/$picsperpage);
echo '<ul>';

// Echos our page numbers so that we can navigate.
for($i=1; $i <= $totalpages; $i++) {
	if($i == $page) {
		// If it's the current page, don't make a link since we are already there.
		echo '<li>' . $i . '</i>';
	} else {
		// Make all other pages links.
		echo '<li><a href="main.php?p=' . $i . '">' . $i . '</a></li>';
	}
}
echo '</ul><br />
<div class="gallery">';

// Get all of the pictures for the current page.          
$allphotos = @mysql_query("SELECT * FROM photos LIMIT $start, $picsperpage")or die("Sorry, but there was an error retrieving the gallery.");

// How many pictures there are right now.
$rowcount = 0;

// For each row in the gallery table...
while ($row = @mysql_fetch_array($allphotos)) {
	// If $rowcount divided by $picsperrow has a remainder of 0...
	if (($rowcount % $picsperrow) == 0) {    
		// Make a <br /> tag with a clear both style, so that there is a new row of images
		echo '<br style="clear: both;" />';
	}
	// Displaying each image with this code.
	echo '<a href="' . $row['url'] . '"><img src="' . $row['thumb'] . '" /></a>';

	// $rowcount + 1.
	$rowcount++;
}

// After all the images are done, end the div.
echo '</div>';    
?>

See it here: clicky

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Borderline · Answer 1 · 2009-04-05T19:08:23+00:00

Excellent, thanks. Unfortunately, it hasn't made any significant change to the result I'm getting.

Borderline · Answer 2 · 2009-04-06T02:39:07+00:00

Thanks, appreciate the trouble you're going to.

I've looked at your link, and attach a screenshot of how I see it. The code in it's entirety is below.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Equine Focus</title>
</head>

<body>

<?php

	// 	Connects to your Database  
		mysql_connect("*****", "*****", "*****") or die(mysql_error());  
		mysql_select_db("*****") 
		or die ("Unable to connect to MySQL");

	// 	How many pictures to display on each page.
		$picsperpage = 12;

	// 	How many pictures to display per row.
		$picsperrow = 3;

	// images
		$thumb ='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];
		$url ='/photos/'.$info['date'].'/'.$info['url'];

	// 	If the page number is set...
		if(isset($_GET['p'])) {

	// 	$page is now the page number.
		$page = $_GET['p'];
		} else {

	// 	Otherwise the page is 1.
		$page = 1;
	}

	// 	What the starting number will be for the query.
		$start = ($page - 1) * $picsperpage;

	// 	Counts all of the rows in the table.
		$res= @mysql_query("SELECT COUNT(id) AS numrows FROM photos") 
		or die("Sorry, but there was an error retrieving the gallery.");

	// 	Gets the number of rows from the array.
		$fetchres = @mysql_fetch_array($res, MYSQL_ASSOC) or die("Sorry, but there was an error retrieving the 
		gallery.");
		$numrows = $fetchres['numrows'];

	// 	How many pages there will be (total pictures / # of pictures per page).
		$totalpages = ceil($numrows/$picsperpage);
		echo '<ul>';

	// 	Echos our page numbers so that we can navigate.
		for($i=1; $i <= $totalpages; $i++) {
		if($i == $page) {

    // 	If it's the current page, don't make a link since we are already there.
        echo '<li>' . $i . '</i>';
		} else {

    // 	Make all other pages links.
        echo '<li><a href="main.php?p=' . $i . '">' . $i . '</a></li>';
    }
}
echo '</ul><br />

<div class="gallery">';

	// 	Get all of the pictures for the current page.          
		$allphotos = @mysql_query("SELECT * FROM photos LIMIT $start, $picsperpage") 
		or die("Sorry, but there was an error retrieving the gallery.");

	// 	How many pictures there are right now.
		$rowcount = 0;

	// 	For each row in the gallery table...
		while ($row = @mysql_fetch_array($allphotos)) {

    //	If $rowcount divided by $picsperrow has a remainder of 0...
		if (($rowcount % $picsperrow) == 0) {    
    
	// 	Make a <br /> tag with a clear both style, so that there is a new row of images
        echo '<br style="clear: both;" />';
    }

    // 	Displaying each image with this code.
		echo '<a href="' . $url. '"><img src="' . $thumb. '" /></a>';

    //	$rowcount + 1.
		$rowcount++;
}
	
	// 	After all the images are done, end the div.
		echo '</div>';    
?>

I've been playing all afternoon, and have almost given up - I've reproduced the gallery with CSS to position the items - out of interest, is it possible to paginate results without use of a table, just stipulate how many thumbnails are to appear on each page?

Look forward to hearing your advice.

rm_daniweb 3 Junior Poster · Answer 3 · 2009-04-06T03:01:52+00:00

Can you post the rest of your script?

I have setup a table on my database and a slightly modified script on the server and it works for me.

Here's the edited code

<?php
// Connects to your Database  
mysql_connect("***", "***", "***")or die(mysql_error());  
mysql_select_db("***")or die ("Unable to connect to MySQL");

// How many pictures to display on each page.
$picsperpage = 12;

// How many pictures to display per row.
$picsperrow = 4;

// images
$thumb ='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];
$url ='/photos/'.$info['date'].'/'.$info['url'];

// If the page number is set...
if(isset($_GET['p'])) {
	// $page is now the page number.
	$page = $_GET['p'];
} else {
	// Otherwise the page is 1.
	$page = 1;
}

// What the starting number will be for the query.
$start = ($page - 1) * $picsperpage;

// Counts all of the rows in the table.
$res= @mysql_query("SELECT COUNT(id) AS numrows FROM photos")or die("Sorry, but there was an error retrieving the gallery.");

// Gets the number of rows from the array.
$fetchres = @mysql_fetch_array($res, MYSQL_ASSOC)or die("Sorry, but there was an error retrieving the 
gallery.");
$numrows = $fetchres['numrows'];

// How many pages there will be (total pictures / # of pictures per page).
$totalpages = ceil($numrows/$picsperpage);
echo '<ul>';

// Echos our page numbers so that we can navigate.
for($i=1; $i <= $totalpages; $i++) {
	if($i == $page) {
		// If it's the current page, don't make a link since we are already there.
		echo '<li>' . $i . '</i>';
	} else {
		// Make all other pages links.
		echo '<li><a href="main.php?p=' . $i . '">' . $i . '</a></li>';
	}
}
echo '</ul><br />
<div class="gallery">';

// Get all of the pictures for the current page.          
$allphotos = @mysql_query("SELECT * FROM photos LIMIT $start, $picsperpage")or die("Sorry, but there was an error retrieving the gallery.");

// How many pictures there are right now.
$rowcount = 0;

// For each row in the gallery table...
while ($row = @mysql_fetch_array($allphotos)) {
	// If $rowcount divided by $picsperrow has a remainder of 0...
	if (($rowcount % $picsperrow) == 0) {    
		// Make a <br /> tag with a clear both style, so that there is a new row of images
		echo '<br style="clear: both;" />';
	}
	// Displaying each image with this code.
	echo '<a href="' . $row['url'] . '"><img src="' . $row['thumb'] . '" /></a>';

	// $rowcount + 1.
	$rowcount++;
}

// After all the images are done, end the div.
echo '</div>';    
?>

See it here: clicky

as far as my tiny knowledge is concern I think your code is not working. You just display 2 pictures but in your code
#
// How many pictures to display on each page.
#
$picsperpage = 12;
#
// How many pictures to display per row.
#
$picsperrow = 4;
should be 12 and 4 per rows

may I request to "Borderline" can you dump your SQL file.
can you post also your <div class="gallery">'; on your CSS.

rm_daniweb 3 Junior Poster · Answer 4 · 2009-04-06T03:13:25+00:00

http://www.equinefocus.co.uk//photos...21/gallery.php

why is it there are 2 double '//' on your link?

I think you have errors on your path...

Will Gresham 81 Master Poster · Answer 5 · 2009-04-06T04:00:50+00:00

I think I see the problem:

You have this at the top of the script:

// images
$thumb ='/photos/'.$info['date'].'/thumbs/'.$info['thumb'];
$url ='/photos/'.$info['date'].'/'.$info['url'];

But at that point $info has not been declared/defined, you can confirm this by looking at your source on the actual page, it is missing the values so you end up with the image src being '/photos//thumbs/' for every image.

This should be within the while statement after the SQL query, so change:

// 	Displaying each image with this code.
	echo '<a href="' . $url. '"><img src="' . $thumb. '" /></a>';

To

// Image Declarations
	$thumb ="/photos/" . $row['date'] . "/thumbs/" . $row['thumb'];
	$url ="/photos/" . $row['date'] . "/" . $row['url'];
// 	Displaying each image with this code.
	echo '<a href="' . $url. '"><img src="' . $thumb. '" /></a>';

That should work.