Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Need help adding paging to a PHP image gallery please

Featured Replies

Hello, I've been redesigning a friend's website, and he's asked if I can add multiple pages to his image gallery. Someone else coded his gallery for him but he can't get in touch with them anymore.

 

I'm a complete novice when it comes to PHP, I can understand the coding of his gallery but I have no idea how to modify it to include paging, and the examples I've looked up on Google have baffled me.

 

Here's the code that we're using at the moment. dp.php only includes the MySQL database details

 

<?php 
$mysql_hostname = "hostname";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database name";

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Database not connected");
mysql_select_db($mysql_database, $bd) or die("Database not found");

$sql = "select * from image where status='1'";
$result = mysql_query($sql,$bd);
$number_of_images = mysql_num_rows($result);
if($number_of_images<1)
{
	echo '<br/><br/><b>Images are currently unavailable at the moment. We apologise for the inconvenience</b>';
}
else
{
	echo '<table>';
	echo '<tr>';
	$i=1;
	while($row = mysql_fetch_array($result))
	 {
		echo '<td>
				<div class="image_gallery_position">
					<a href="mailto:'.$row['email'].'">
						<img id="uploaded_image" src="uploaded_logos/'.$row['image_name'].'" width="146" height="146"/>
					</a>
				</div>
				<div align="center" class="designer">Designer:   <b>'.$row['user_name'].'</b></div>
			</td>';
		if($i%4 == 0)
		{
			echo '</tr><tr><td> </td></tr><tr><td> </td></tr>';
		} 
		$i++;
	 }
	 echo '</table>';
}
?><br/>

 

All we want is for it to create a new page after five rows, but I'm utterly baffled as to how to do this. If anyone could help, I'd be greatly appreciative.

 

Thanks for your time

Assuming you have one image per row, you can calculate how many pages you need to display, then use $_GET to provide links between the pages. If you are displaying more than 1 image per row, just change the initial calculation to cater for the number of images per row.

$numRows = 5;

if (isset($_GET['p']) && is_numeric($_GET['p'])) {
$pages = $_GET['p'];
} else {
$sql = "select * from image where status='1'";
       $result = mysql_query($sql,$bd);
       $number_of_images = mysql_num_rows($result);

//divide the number of records by the number to display on a page to determine
//how many pages are required. Use the ceil function to round up the result.
	if ($records > $numRows) {
		$pages = ceil ($number_of_images/$numRows);
	} else {
		$pages=1;
		}
}
//ascertain at what record to start displaying on the page	
if (isset($_GET['s']) && is_numeric($_GET['s'])) {
$start = $_GET['s'];
} else {
	$start = 0;
		}

Do your while loop to display the rows. Then provide links to the various pages.

if ($pages > 1) {
echo '<p>';

//determine how many pages have been displayed so far
$currentPage = ($start/$numRows) + 1;
if ($currentPage != 1) {
echo '<a href="dp.php?s=' . ($start - $numRows) . '&p=' . $pages . '">Previous</a> ';
}
for ($i = 1; $i<=$pages; $i++) {
if ($i != $currentPage) {
	echo '<a href="dp.php?s=' . (($numRows * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> ';
	} else {
		echo $i . ' ';
		}
	}
if ($currentPage != $pages) {
	echo '<a href="dp.php?s=' . ($start + $numRows) . '&p=' . $pages . '">Next</a>';
		}
echo '</p>';
}

  • Author

Hi, sorry for the long reply time, I thought I had set a notification for when a reply is posted but I guess I forgot.

 

I really appreciate the help, however I'm not sure I've implemented your code properly as I'm not getting any sort of page splitting.

 

Here's how the code looks now;

 

<?php 
include('db.php');

$numRows = 16;

if (isset($_GET['p']) && is_numeric($_GET['p'])) {
	$pages = $_GET['p'];
} else {
	$sql = "select * from image where status='1'";
	$result = mysql_query($sql,$bd);
	$number_of_images = mysql_num_rows($result);

//divide the number of records by the number to display on a page to determine
//how many pages are required. Use the ceil function to round up the result.
	if ($records > $numRows) {
		$pages = ceil ($number_of_images/$numRows);
	} else {
		$pages=1;
	}
}

//ascertain at what record to start displaying on the page      
if (isset($_GET['s']) && is_numeric($_GET['s'])) {
	$start = $_GET['s'];
} else {
	$start = 0;
}

$sql = "select * from image where status='1'";
$result = mysql_query($sql,$bd);
$number_of_images = mysql_num_rows($result);
if($number_of_images<1)
{
	echo '<br/><br/><b>Images are currently unavailable at the moment. We apologise for the inconvenience</b>';
}
else
{
	echo '<table>';
	echo '<tr>';
	$i=1;
	while($row = mysql_fetch_array($result))
	 {
		echo '<td>
				<div class="image_gallery_position">
					<a href="mailto:'.$row['email'].'">
						<img id="uploaded_image" src="uploaded_logos/'.$row['image_name'].'" width="146" height="146"/>
					</a>
				</div>
				<div align="center" class="designer">Designer:   <b>'.$row['user_name'].'</b></div>
			</td>';
		if($i%4 == 0)
		{
			echo '</tr><tr><td> </td></tr><tr><td> </td></tr>';
		} 
		$i++;
	 }
	 echo '</table>';
}

if ($pages > 1) {
	echo '<p>';

	//determine how many pages have been displayed so far
	$currentPage = ($start/$numRows) + 1;
	if ($currentPage != 1) {
		echo '<a href="image_upload.php?s=' . ($start - $numRows) . '&p=' . $pages . '">Previous</a> ';
	}

	for ($i = 1; $i<=$pages; $i++) {
		if ($i != $currentPage) {
			echo '<a href="image_upload.php?s=' . (($numRows * ($i - 1))) . '&p=' . $pages . '">' . $i . '</a> ';
		} else {
			echo $i . ' ';
		}
	}
	if ($currentPage != $pages) {
		echo '<a href="image_upload.php?s=' . ($start + $numRows) . '&p=' . $pages . '">Next</a>';
	}
	echo '</p>';
}
?>

 

If I, for testing purposes, manually change $pages to anything higher than 1, then the Previous, page numbers and Next options appear under the gallery, however the images that go over 16 (I'm trying a 4x4 gallery grid at the moment) aren't being hidden and shown on the next pages, so the page numbers don't do anything other than append the code to the URL at the moment.

 

Do you have any suggestions as to what needs to be done? Thanks.

Edited by ozMidra

On a different note, you could try jquery pagination, if you want to go client-side... but then you could build that on top of what you've already got as an augmentation for a bullet proof solution. Worth checking out, anyway.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.