a have a website with more than 400 pictures in a directory. I'd like to list them by 12 on every page. How can i do that? Here is my actual code:
<!doctype html>
<html lang="hu">
<head>
<title>Amatőr</title>
<meta charset="utf-8"/>
</head>
<body>
<h2><a href="../php/upload_picture.php" style="font-size:15pt; color:#ff00e8; text-decoration: none;">Vannak jó képeid? Töltsd fel őket és kikerülhetnek az oldalra!</a></h2>
<article>
<header>
Amatőr Lányok
</header>
<div id="kepek">
<?php
$imgdir = '../img/blog/img/amator/'; //Pick your folder
$allowed_types = array('png','jpg','jpeg','gif'); //Allowed types of files
$dimg = opendir($imgdir);//Open directory
while($imgfile = readdir($dimg))
{
if( in_array(strtolower(substr($imgfile,-3)),$allowed_types) OR
in_array(strtolower(substr($imgfile,-4)),$allowed_types) )
/*If the file is an image add it to the array*/
{$a_img[] = $imgfile;}
}
$totimg = count($a_img); //The total count of all the images
//Echo out the images and their paths incased in an li.
for($x=0; $x < $totimg; $x++){ echo "<a onclick='Lightbox.start(this, false, false, false, false); return false;' rel='lightbox[amator]' href='" . $imgdir . $a_img[$x] . "'><img class='kep_listaz' width='200px' height='160px' src='" . $imgdir . $a_img[$x] . "' /></a>";}
?>
</div>
</article>
</body>
</html>
Thanks!
So this is really more of a maths questions. You will need to get the total count of the images, then divide that by the max number of images per page (make sure to ceil() it).
You have now a max number of pages needed to view all of these images. What you need to do now is figure whether you want page=1/page=2 etc or as a start and end. Both are relatively easy, however, with the page you'd need to do
$page = (int)$_GET['page'];
$start = $page * $max_items_per_page;
$end = $start + $max_items_per_page;
This way it's probably saver. Also add extra code to make sure you're not out of bounds with the page requested.
Now it's a matter of getting an array of the files (I suggest you use glob()) and use array_slice() that from start to end.
Finally just have a previous/next page, or list all (or some) of the pages. Getting next and previous is as simple as adding/removing 1 to $page, i.e. $next = $page + 1; and $prev = $page-1;. Again, for both of these, double check that you're not out of bounds. Probably best not to show next/previous if they are out of bounds.
There are two ways to paginate this kind of data: on the front-end where you send it all and JavaSctipt only shows the user a portion at a time, or on the back-end where the page is only rendered with a portion at a time and you reload the whole page to get more.
The fastest way to get it working is using the back-end method:
Before your for loop add $page = isset($_GET['page']) ? $_GET['page']-1 : 0;
Change the loop's argument to $x=$page*12; $x < $totimg && $x < ($page+1)*12; $x++
Then you can manipulate pages by adding ?page=3 to the url
You'll also want to add some error handling incase an invalid page number is submitted.