Hi, I'm trying to make my gallery so that it shows a certain number of images then creates more pages.
Can anyone help me out on this?

This is my gallery file at the minute.

gallery.php

<!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">
   <head>

      <link href="../css/thumbnailviewer.css" rel="stylesheet" type="text/css" />
      <link href="../css/template.css" rel="stylesheet" type="text/css" />
      <link href="../css/gallery.css" rel="stylesheet" type="text/css" />


      <script src="../javascript/thumbnailviewer.js" type="text/javascript">

      /***********************************************
      * Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
      * This notice must stay intact for legal use.
      * Visit http://www.dynamicdrive.com/ for full source code
      ***********************************************/
      </script>

      <meta name="google-site-verification" content="bnaI_LwZ6UHyodzqR5wpWkFUDJRGR-uvKhhImxgR6ac" />
      <meta name="description" content="The leading reptile shop in Ireland. Based in Belfast">
      <meta name="keywords" content="Snake, Lizard, Tortoise, Turtle, Spider, Tarantula, Live, Food, Reptile, Belfast, Shop>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>Reptiles Inverts Amphibians Belfast </title>
   </head>

   <body>

      <div class="wrap">

         <div id="header">

               <div id="logo">
                  <img src="../images/images/reptilelogo.jpg" alt="logo" />
               </div> 

               <div id="sqiggle">

               </div>
            </div>

         <div id="container">

            <div id="menu">

              <div id='cssmenu'>

                  <ul>  
                     <li><a href='home.php'><span>Home</span></a></li>
                     <li><a href='gallery.php'><span>Gallery</span></a> </li>
                     <li><a href='contact.php'><span>Contact</span></a></li>
                     <li><a href='available.php'><span>Livestock</span></a></li>
                     <li><a href='#'><span>Shop</span></a></li>
                 </ul>
              </div>
           </div>


                 <?php
                 include 'connect.php';
                    $q = "SELECT a.imagepath AS thumbpath, b.imagepath AS imagepath, name
                          FROM reptile_thumbs AS a
                          JOIN reptile_gallery AS b
                          USING(id) ORDER BY id DESC";


                    if($r = mysql_query($q))
                    {
                       echo '<div id="thumbs">';
                       while($row=mysql_fetch_array($r))
                       {
                          echo "<div class='thumb'>
                                <a href='{$row['imagepath']}' rel='thumbnail'>
                                <img class='thumbnail' src='{$row['thumbpath']}' alt='{$row['name']}' title='{$row['name']}' />
                                <div class='imgLabel'>{$row['name']}
                                </div></a></div>";;
                        }

                        echo '</div>';
                    }
                    else
                    {
                       echo mysql_error();
                    }



                ?>

           <div id="footer">
              <p><center><span class="span2">Reptile, 48 York Street, Belfast, BT15 1AS</span></center></p>
           </div>
      </div>
  </div>

Thanks for looking....

Recommended Answers

All 7 Replies

In MySQL you can use the LIMIT clause [Select statement Reference]. You can use SELECT COUNT to determine how many pictures are in the gallery. Decide how many images you want on each page, then divide count into pages. All your links (next, previous, #) will need to pass the page number in the url.

That's pretty much how all pagination works.

Hi, so this is what I have for pagination

//populate the gallery with thumbnails linking to fullsized images
                 include 'connect.php';

                    $targetpage = "gallery.php";
                    $per_page = 6;
                    $pages_query = mysql_query("SELECT COUNT(`id`) FROM `reptile_thumbs`") or die(mysql_error());
                    $pages = ceil(mysql_result($pages_query, 0) / $per_page);

                    $page = (isset($_GET['page']) AND (int)$_GET['page'] > 0) ? (int)$_GET['page'] : 1;
                    $start = ($page - 1) * $per_page;
                    $last = ($pages - 1) * $per_page;
                    $prev = $page - 1;                                                      
                    $next = $page + 1; 


                    $q = "SELECT a.imagepath AS thumbpath, b.imagepath AS imagepath, name
                          FROM reptile_thumbs AS a
                          JOIN reptile_gallery AS b
                          USING(id) ORDER BY id DESC
                          LIMIT $start, $per_page";




                    if($page > $start && $page < $last){ 
                       echo '<a href="?page=' . $next . '">Next page</a>';
                       echo '<a href="?page=' . $next . '">Next page</a>'; 
                    } 

                    if($r = mysql_query($q)){
                       echo '<div id="thumbs">';
                       while($row=mysql_fetch_array($r)){
                          echo "<div class='thumb'>
                                <a href='{$row['imagepath']}' rel='thumbnail'>
                                <img class='thumbnail' src='{$row['thumbpath']}' alt='{$row['name']}' title='{$row['name']}' />
                                <div class='imgLabel'>{$row['name']}
                                </div></a></div>";
                        }
                    }
                    else{
                       echo mysql_error();
                    }
                    echo '</div>';
                 ?>

The problem I have now is that I cant get the 'Next' and 'Previous' links right. As it stand I get both links on page 1 and no other pages.

The if clause to do this is

if($page > $start && $page < $last){ 
                       echo '<a href="?page=' . $prev . '">Previous page</a>';
                       echo '<a href="?page=' . $next . '">Next page</a>'; 
                    } 

I thought this looked like it should echo both links on any page greater than the first and less than the last pages. Can anyone see where I'm going wrong with this?

Thanks for looking.....................

Consider replacing the snippet for previous and next pages with:

if ($page > $start){ 
                       echo "<a href=\"?page={$prev}\">Previous page</a> ";
}
if ($page < $last){ 
                       echo "<a href=\"?page={$next}\">Next page</a>"; 
}

Then you'll get one or other, or both, depending on where you are in relation to the table as a whole. With

if ($page > $start && $page < $last) {
   blah
}

you'll get nothing unless you're in the middle of the gallery (so on the last page, you'll get nothing, also on the first)

Hi thanks for that.

Replacing with your code gives me'previous' and 'next' links on the first page and 'next' links only on all further pages. Could I have went wrong with defining first and last pages?

$per_page = 6;
                    $pages_query = mysql_query("SELECT COUNT(`id`) FROM `reptile_thumbs`") or die(mysql_error());
                    $pages = ceil(mysql_result($pages_query, 0) / $per_page);

                    $page = (isset($_GET['page']) AND (int)$_GET['page'] > 0) ? (int)$_GET['page'] : 1;
                    $start = ($page - 1) * $per_page;//first page
                    $last = ($pages - 1) * $per_page;//last page
                    $prev = $page - 1;                                                      
                    $next = $page + 1;

I now have thi working, it may be convulted code but it works!
I will put it up incase it can help anyone in the future.

if ($page >= 1 && $page < $pages-1){ 
   echo "<a href=\"?page={$next}\">Next page</a> ";//if page number is 1 or above, puts a 'next' link on it
   if ($page >=2 && $page < $pages){
   echo "<a href=\"?page={$prev}\">Previous page</a> ";//if page number is above 2 put a 'previous' link on it along with the 'next'link   
   }
}
else if ($page == $pages-1){
   echo "<a href=\"?page={$prev}\">Previous page</a> ";//put a 'previous' link only on the last page
}       
else{
   echo 'No more images to display';//incase someone tries to access a page above $pages via the address bar
}   

Thanks for that, Ive downloaded it for future use!

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.