array_slice page numbering

Question

This script takes every image in a folder and shows it on a webpage. Is there a way to show like an simple page number like 1,2,3,4,5 every 10 images or so? everything I tried t

Answer 1

You don't need a database to implement simple pagination.

$currentpage = $_GET['p'];
for ($i = ($currentpage*$pageSize); $i<sortedImages as $image) {

  // your HTML output here

}

for($i = 0; $i < $sortedImages/$pageSize; $i++){
  writeHtml('<a href=/?p='.$i + 1.'/>');
}

That's just an example, probably won't work if you cut 'n paste. But there to give you a good idea of how it could be implemented.

Answer 2

Given that you said you are not a PHP master I'll show my solution and explain it step by step.
I hope you can find it helpful.

Here is the loop I use for pagination:

for($i = (($page-1)*$perPage); $i < min(($page*$perPage), $total); $i++) {
    }

I'll gonna use this to create a new array with the elements 11-20, 21-30 and so on.

First of all I removed the .$i in your $sortedImages array's index (15th row of your code)

for ($i = 0; $i < $count; $i++) {
    $sortedImages[date ('YmdHis', filemtime($images[$i]))] = $images[$i]; #15th Row
}

because it makes the index a bit messy (it is necessary for a next step).

Then I create a new array with 0 to N indexes which makes the code tidy (I do it to change your code as less as possible) and then I populate it with the elements of $sortedImages array.

$k = 0; # The new index
$newArray = array(); # The new array
foreach($sortedImages as $soImg) {
    $newArray[$k] = $soImg; 
    $k++;
}

Finally the pagination's implementation:

$page = $_GET["page"];
$perPage = 3;
$total = $count;

for ($i = (($page-1)*$perPage); $i < min(($page*$perPage), $total); $i++) {
    $newSortedImages[$i] = $newArray[$i];
}

Variables:

• $page = $_GET["page"]; is the page number retrived from the url ($_GET[] is a superglobal array)
• $perPage is the number of elements to show per page
• $total = $count; is the number of $images array (13th line)

The loop:

• $i = (($page-1)*$perPage) is the start of the loop, if the page is 1 the loop should start from 0 then the expression (($page-1)*$perPage) makes it work.
• $i < min(($page*$perPage), $total) is the end of the loop, min() function finds the lowest value between its arguments, it is helpful when e.g. the last page contains 4 elements while 6 are expected.

Then you just need to change the array to loop through in 29th row of your code from $sortedImages to $newSortedImages.

For pagination controls use this:

$nextPage = $page + 1;
$prevPage = $page - 1;

Here is the new code implementation:

# To prevent browser error output
header('Content-Type: text/javascript; charset=UTF-8');
# Path to image folder
$imagefolder = 'img/';
# Show only these file types in the image folder
$imagetypes = '{*.jpg,*.JPG,*.JPEG,*.png,*.PNG,*.gif,*.GIF}';
# Add images to array
$images = glob($imagefolder.$imagetypes, GLOB_BRACE);
# Sort the images based on its 'last modified' time stamp
$sortedImages = array();
$count = count($images);
for ($i = 0; $i < $count; $i++) {
    $sortedImages[date ('YmdHis', filemtime($images[$i])).$i] = $images[$i];
}

# Set to 'false' if you want the oldest images to appear first
$newest_images_first = true;
# Sort images in array
if($newest_images_first) {
    krsort($sortedImages);
} else {
    ksort($sortedImages);
}

# Now I give an index from 0 to N to the new array to make it work with pagination loop
$k = 0; # The new index
$newArray = array(); # The new array
foreach($sortedImages as $soImg) {
    $newArray[$k] = $soImg;
    $k++;
}

$page = $_GET["page"];
$perPage = 3;
$total = $count;
for ($i = (($page-1)*$perPage); $i < min(($page*$perPage), $total); $i++) {
    $newSortedImages[$i] = $newArray[$i];
}

# Generate the HTML output
writeHtml('<ul class="ins-imgs">');
foreach ($newSortedImages as $image) {
    # Get the name of the image, stripped from image folder path and file type extension
    $name = 'Image name: '.substr($image,strlen($imagefolder),strpos($image, '.')-strlen($imagefolder));
    # Get the 'last modified' time stamp, make it human readable
    $last_modified = '(last modified: '.date('F d Y H:i:s', filemtime($image)).')';
    # Begin adding
    writeHtml('<li class="ins-imgs-li">');
    writeHtml('<div class="ins-imgs-label">'.$name.' '.$last_modified.'</div>');
    writeHtml('<div class="ins-imgs-img"><a name="'.$image.'" href="#'.$image.'">');
    writeHtml('<img src="'.$image.'" alt="'. $name.'" title="'. $name.'">');
    writeHtml('</a></div>');
    writeHtml('</li>');
}
writeHtml('</ul>');
writeHtml('<link rel="stylesheet" type="text/css" href="ins-imgs.css">');
# Convert HTML to JS
function writeHtml($html) {
    echo "document.write('".$html."');\n";
}

For page numbering you have to know the total of elements and divide it by $perPage elements, obviously the result must be an integer, so you'll gonna use ceil() function

From php.net

Returns the next highest integer value by rounding up value if necessary.

$pages = ceil($count / $perPage);

And then use this to display peges numbers:

for($i = 1; $i <= $pages; $i++) {
    writeHtml('<a href="?page=' . $i . '">' . $i . '</a> ');
}