View Full Version : PHP Paging problem... sort of!

06-26-2008, 02:33 PM
Hi Guys,

I have a gallery displaying 3 thumbnails and a large image, I have attached a screenshot to give you an idea as this site is only local at the mo.

When you click on a thumb the main image changes which is fine but when you click next or previous the main image stays the same as it was on the previous page until another thumb is chosen.

I cant figure out what I need to do to get the main image to change so it is the same as the first thumb on each page when next or previous is clicked.

Here is my code......

include("Connections/PbyDTconnection.php"); // database connection
$ImgCatIDurl = $_GET['ImgCatIDurl'];
$ImageID = $_GET['ImageID'];
$rowsPerPage = 3; //how many rows per page
$pageNum = 1; //by default we show first page
if(isset($_GET['page'])) // if $_GET['page'] defined, use it as page number
{ $pageNum = $_GET['page']; }
$offset = ($pageNum - 1) * $rowsPerPage; // counting the offset
$query = sprintf("SELECT * FROM images where ImgCatID='$ImgCatIDurl' LIMIT $offset, $rowsPerPage");
$result = @mysql_query($query);
$images = @mysql_fetch_array($result);// print the random numbers

$query = "SELECT COUNT(ImageID) AS numrows FROM images WHERE ImgCatID='$ImgCatIDurl'"; // how many rows we have in database
$result2 = mysql_query($query) or die();
$images2 = mysql_fetch_array($result2, MYSQL_ASSOC);
$numrows = $images2['numrows'];
$maxPage = ceil($numrows/$rowsPerPage); // how many pages we have when using paging?
$self = $_SERVER['PHP_SELF']; // print the link to access each page
$nav = " $pageNum of $maxPage pages ";
// creating previous and next link plus the link to go straight to the first and last page

if ($pageNum > 1)
$page = $pageNum - 1;
$prev = " <a href=\"$self?ImgCatIDurl=$ImgCatIDurl&ImageID=$ImageID&page=$page\">Previous</a> ";

$first = " <a href=\"$self?ImgCatIDurl=$ImgCatIDurl&ImageID=$ImageID&page=1\">First</a> ";
$prev = '&nbsp;'; // we're on page one, don't print previous link
$first = '&nbsp;'; // nor the first page link

if ($pageNum < $maxPage)
$page = $pageNum + 1;
$next = " <a href=\"$self?ImgCatIDurl=$ImgCatIDurl&ImageID=$ImageID&page=$page\">Next</a> ";

$last = " <a href=\"$self?ImgCatIDurl=$ImgCatIDurl&ImageID=$ImageID&page=$maxPage\">Last</a> ";
$next = '&nbsp;'; // we're on the last page, don't print next link
$last = '&nbsp;'; // nor the last page link
/////////////////////////////////////////// query for main image
$query = sprintf("select * FROM images where ImageID='$ImageID'");
$result_main = @mysql_query($query);
$image_main = @mysql_fetch_array($result_main);


and from the body....

<div id="gal_holder">
<div id="left_thumbs">
<?php do { ?>
<div class="img_left2">
<div class="img1"><a href="gallery2.php?ImgCatIDurl=<?php echo $images['ImgCatID'] ?>&ImageID=<?php echo $images['ImageID'] ?>&page=<?php echo $pageNum ?>"><img src="Images/Gallery/Thumbs/<?php echo $images['ImgURLthumb'] ?>" alt="<?php echo $images['ImgTitle']?>" title="<?php echo $images['ImgTitle']?>" ></a></div>
<?php }while ($images = mysql_fetch_array($result)) ?>
<div class="img_right2"><p><span class="blue_bold">Description:</span> <?php echo $image_main['ImgTitle'] ?></p>
<div class="img2big"><img src="Images/Gallery/<?php echo $image_main['ImgURLmain'] ?>" alt="<?php echo $images['ImgTitle']?>" title="<?php echo $images['ImgTitle']?>" ></div>
<div class="paging"><p><span class="blue_bold3"><?php echo $prev ?></span><span class="blue_bold3">|</span><span class="blue_bold3"><?php echo $next ?></span><span class="blue_bold2">Add to Basket</span></p></div>

.... any ideas anyone. Cheers,


06-26-2008, 03:31 PM
I found that when I put the Entire pages code around the html code (right after it says

$query = sprintf("SELECT * FROM images where ImgCatID='$ImgCatIDurl' LIMIT $offset, $rowsPerPage");
$result = @mysql_query($query);
$images = @mysql_fetch_array($result);// print the random numbers

) and then continue the rest of the pages code.

It worked fine for me, I was just doing tabular data not anything like your doing by figured I would let you know my experiences.

Not sure if it will help but hope it does

06-26-2008, 08:54 PM
Still cant figure this out. I know that next/prev refreshes the page and changes the page number in the url. I need to find a way to change the ImageID in the URL as well so that it pulls out the correct image when next/prev is clicked.

Any ideas anyone!!!!

06-26-2008, 09:20 PM
on my 5th beer so this one will have to wait til tomorrow, sorry its just going to require to much attention!

06-26-2008, 09:23 PM
No big hurry Lux. Tomorrows fine mate.


06-28-2008, 02:14 PM
Still no joy on this so just bumping this forward in case it gets forgotten.


06-30-2008, 08:36 PM
hey tux, sorry for not getting back sooner i've been to a mini festival that lasted the weekend and only just remembered where i left my computer(hehe)

anyways i've modified a script that now does what you want, i know i should have used you code but........anyways here you go, if you have any questions let me know!

cool cool........and enjoy


//check to see if cat id is in the URL
//check to make sure its a numeric value (simple security)
$cid = $_GET['cid'];

//check to see if theres a picture id in the URL
$pid = $_GET['pid'];


$rowsPerPage = 1;
$thumbsPerPage = 3;
$pageNum = 1;

$pageNum = $_GET['page'];

$offset = ($pageNum - 1) * $rowsPerPage;
$cat = mysql_query("select category_name from gallery_category where category_id =".$cid);
$c = mysql_fetch_assoc($cat);

$gallery_output = "<h2>".$c['category_name']."</h2>";

$image = mysql_query("SELECT * FROM gallery_photos where photo_category =".$cid." LIMIT $offset, $rowsPerPage");

while($i = mysql_fetch_array($image)){
$gallery_output .= "<p>";
$gallery_output .= "<img src=\"cPanel/photos/".$i['photo_filename']."\" />";
$gallery_output .= "</p>";

$total_photos = mysql_query("select * from gallery_photos where photo_category = ".$cid);
$numrows = mysql_num_rows($total_photos);

// how many pages we have when using paging?
$maxPage = ceil($numrows/$rowsPerPage);

$self = $_SERVER['PHP_SELF'];

// creating 'previous' and 'next' link
// plus 'first page' and 'last page' link

// print 'previous' link only if we're not
// on page one
if ($pageNum > 1){
$page = $pageNum - 1;
$prev = " <a href=\"$self?cid=".$cid."&page=$page\" class=\"btn\">Prev</a> ";

$first = " <a href=\"$self?cid=".$cid."&page=1\" class=\"btn\">First Image</a> ";

$prev = " <span class=\"btn-nolink\">Prev</span> "; // we're on page one, don't enable 'previous' link
$first = " <span class=\"btn-nolink\">First Page</span> "; // nor 'first page' link


// print 'next' link only if we're not
// on the last page
if ($pageNum < $maxPage){
$page = $pageNum + 1;
$next = " <a href=\"$self?cid=".$cid."&page=$page\" class=\"btn\">Next</a> ";

$last = " <a href=\"$self?cid=".$cid."&page=$maxPage\" class=\"btn\">Last Image</a> ";
$next = " <span class=\"btn-nolink\">Next</span> "; // we're on the last page, don't enable 'next' link
$last = " <span class=\"btn-nolink\">Last Page</span> "; // nor 'last page' link

// print the page navigation link
$gallery_output .= "<p>".$first . $prev . " Image <strong>$pageNum</strong> of <strong>$maxPage</strong> images " . $next . $last."</p>";

//grab the thumbnails and add anchor tags
$thumbs = mysql_query("SELECT * FROM gallery_photos where photo_category =".$cid." LIMIT $offset, $thumbsPerPage");

while($t = mysql_fetch_array($thumbs)){

$gallery_output .= "<a href=\"photo2.php?cid=".$cid."&page=".$pageNum."\"><img src=\"cPanel/photos/".$t['photo_filename']."\" /></a>";

//give the image link

//3 thumbnails
$categories = mysql_query("select * from gallery_category order by category_name");

$gallery_output = "<ul>";

while($cat = mysql_fetch_assoc($categories)){
$gallery_output .= "<li><a href=\"photo2.php?cid=".$cat['category_id']."\">".$cat['category_name']."</a></li>";

$gallery_output .= "</ul>";


<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles/stylesheet.cs" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Photo Gallery Sample</title>
<div id="wrapper">

<h1>Photo Albums</h1>
<div id="photo-gal">
echo $gallery_output;
</div><!-- photo-gal -->

</div><!-- wrapper -->


07-01-2008, 12:14 PM
Thanks for the code LUX and the delay is not a problem..... had a bit of a busy weekend too..... as i said before there is not a big hurry to get this done.

I have compared my code with yours and yours is much cleaner and I found it quite easy to follow. I will adapt it to fit in with my DB and no doubt be back for a few pointers.

I take it I will have to add the two classes to my CSS file, ( btn and btn-nolink ..... what does btn stand for???? cant think??? ) and style the btn-nolink with display: none;

I'll let you know how I get on. Cheers mate.


07-01-2008, 12:34 PM
good point i'll add the css tonight.

I have 2 different images behind the links; ones blue for an active link and the other is grey so the user can easily see which is a link and which isn't. i guess you can customise it the way you like most.