CODEWITHSUNDEEP
phpimagegallery
Migisha
Migisha

Reputation: 415

How can I load the next list of images on a template PHP page.

I have a gallery page I am working on and cannot seem to get the next set of images to load correctly by using GET parameter page=2.

I am using a table, with 6 images, and next and previous buttons. When i click Next from page1 however, it loads images 8 to 13, instead of the agreed-upon 7 to 12.

The code is here:

<?php 
echo "<table width=\"490\" border=\"1\" align=\"center\">";
if(isset($_GET['page'])){
//Read Page, Set Start image, End image
$cur_page=abs($_GET['page']);
//if the page is page1, then set the defaults
if($cur_page==1){
    $prev_page=0;
    $next_page=2;
    $start_img=0;
    $last_img=6;
    }
    //if the page is not page1, calculate the defaults
    else{
        $prev_page=$cur_page-1;
        $next_page=$cur_page+1;
        $start_img=(($cur_page-1)*6)+1;
        $last_img=$start_img+5;
        }
}else{
//Page=1 start image=1 end image=6
$cur_page=0;
$prev_page=1;
$next_page=2;
$start_img=0;
$last_img=6;
}
//Do the sql query for the images
$sql="SELECT * FROM images LIMIT $start_img, 6";
$result = mysql_query($sql, $conn) or die(mysql_error());
//Set a counter variable to iterate the image display
$count=0;

//Begin the table that displays the images.
while ($newArray = mysql_fetch_array($result)) {
$count++;
//Print the odd-numbered column first
if($count%2==1){
    echo "<tr><td width=\"50%\"><a href=\"$newArray[Pic_Address]\">$newArray[Pic_Address]</a></td>";
//Print the even-numbered column next
}else{
    echo "<td width=\"50%\"><a href=\"$newArray[Pic_Address]\">$newArray[Pic_Address]</a></td></tr>";
}
}
//print the next and previous Links
echo "<tr>";
if($prev_page==0){echo "<td align=\"center\">Prev</td>";}else{echo "<td align=\"center\"><a href=\"index.php?page=$prev_page\">Prev</a></td>";};
echo "<td align=\"center\"><a href=\"index.php?page=$next_page\">Next</a></td>";

echo "</tr>
</table>";

//Printscreen to test the page-load variables.

echo "  <p align=\"center\">
    current page=$cur_page <br>
    prev_page=$prev_page <br>
    next_page=$next_page <br>
    start_img=$start_img <br>
    last_img=$last_img <br>
    </p>
    ";
?>

Upvotes: 1

Views: 193

Answers (2)

sbatson5
sbatson5

Reputation: 648

First image is indexed as 0 and not 1.

if($cur_page==1){ 
   $prev_page=0; 
   $next_page=2; 
   $start_img=0; 
   $last_img=5; 
} 
//if the page is not page1, calculate the defaults 
else{
    $prev_page=$cur_page-1; 
    $next_page=$cur_page+1; 
    $start_img=($cur_page-1)*6; 
    $last_img=$start_img+5; 
}

start_img should not add 1.

Also, you don't need 2 else conditions, as the only one will be met.

Upvotes: 1

DavChana
DavChana

Reputation: 1966

The problem is in these lines:

$start_img=0;
$last_img=6;

&

$start_img=(($cur_page-1)*6)+1;
$last_img=$start_img+5;

These lines, when page=1, will load images from ID 0 to ID 6, total 7 images and when page=2, the code will result in $statr_img = ((2-1)*6)+1 = 7 and ID 7 actually will be 8th image, because we are counting from 0. Same, $last_img = 7+5 = 12 and again, ID 12 is the 13th image.

UPDATE:

Here is the updated complete code. No need for an if/else . Ofcourse you need to sanitize $_GET.

$cur_page = $_GET["page"];
$prev_page=$cur_page-1;
$next_page=$cur_page+1;
$start_img=(($cur_page-1)*6);
$last_img=$start_img+5;

Results for Page =1,2,3 ($cur_page is 1 or 2 or 3) from above code:
Page=1, Results:

$prev_page = 1-0 = 0    
$next _page = 1+1 = 2
$start_img = ((1-1)*6) = 0*6 = 0
$last_img = 0+5 = 5

Page=2, Results:

$prev_page = 2-0 = 1
$next _page = 2+1 = 3
$start_img = ((2-1)*6) = 1*6 = 6
$last_img = 6+5 = 11

Page=3, Results:

$prev_page = 3-0 = 2
$next _page = 3+1 = 4
$start_img = ((3-1)*6) = 2*6 = 12
$last_img = 12+5 = 17

Also, use of <table> for layouts is strongly discouraged. Please look into CSS & DIVs. Look into this code for implying same design in CSS.

//continued from above $var calculating code + your MySql code

//Set a counter variable to iterate the image display
$count=0;

while ($newArray = mysql_fetch_array($result)) {
    $count++;
    echo "<div id=\"table\">\r\n";
    // Print the odd-numbered column first
    // if ID is 0,2,4 then Images are 1,3,5 OR odd
    if($count%2==0){
        echo "<div id=\"row\">\r\n<div class=\"cell\">\r\n<a href=\"$newArray[Pic_Address]\">$newArray[Pic_Address]</a></div><!--//cell-->\r\n";
    } else { // IDs are 1,3,5 OR Images are 2,4,6 OR even
        echo "<div class=\"cell\"\r\n><a href=\"$newArray[Pic_Address]\">$newArray[Pic_Address]</a></div><!--//cell-->\r\n</div><!--//row-->\r\n";
    } //else ends
 // while ends

//print the next and previous Links
echo "<div id=\"links\">\r\n";

if($prev_page != 0)
    echo "<a href=\"index.php?page=$prev_page\">";
echo "Prev"
if($prev_page != 0)
        echo "</a>\r\n";
echo "<a href=\"index.php?page=".$next_page."\">Next</a>\r\n";
echo "</div><!--//links-->\r\n"

echo "</div><!--//table-->\r\n"

So, now your page structure is like:

+----------------table-----------------+
| +---------------row----------------+ |
| | +----cell------+------cell-----+ | |
| | |    img       |     img       | | |
| | +--------------+---------------+ | |
| +---------------row----------------+ |
| | +----cell------+------cell-----+ | |
| | |    img       |     img       | | |
| | +--------------+---------------+ | |
| +---------------row----------------+ |
| | +----cell------+------cell-----+ | |
| | |    img       |     img       | | |
| | +--------------+---------------+ | |
| +----------------------------------+ |
| +--------------links---------------+ |
| |    Prev                Next      | |
| +----------------------------------+ |
+--------------------------------------+

Of course you need to check out magical Float property of CSS for each Div. I would leave that to you (Google Css Float).

Upvotes: 3

Related Questions