Create new Page after X created Elements

[7blake]

Hi, I'm trying to make a gallery, and it more or less works. But I don't like having to load so many images for the user to view.

 

What happens is I have a very basic method of loading the images into the index file using require.

<?php
foreach (glob("*.jpg") as $filename) {
    echo "<div class='itemContainer'><img src='" . $filename . "' class='item' id='" . $filename . "' /></div>";
}
?>

Pretty simple. but it just loads everything in the directory. What I'd like to do is make it so 30 images load, and then it creates a new "div container" and loads the next 30 in. As well as a page counter, and a next and previous button.

 

I'm not too sure how to control the flow of information from PHP to the index file when using require. Or if this is even the right way of doing it.

 

My thoughts are sorta like this

$imageCounter = 0;
$newPageStandard = 30;
foreach($imageDir as $image){

// echo image;
$imageCounter++

if($imageCounter == $newPageStandard){

$newPageStandard += $newPageStandard; // increase standard for next page if there are enough images

//create new image container(div)

//somehow re-direct the echo into this new image container


}
// continue echoing images 
}

Something Along those lines. Is this at all on the right path, or should I be grabbing all the images, and stuffing them into an multidimensional array and breaking each array into segments of 30? Or perhaps another completely different method? (yeah I dont have a clue what Im doing atm)

Edited November 10, 2014 by 7blake

[Barand]

Having got the array (say, $all_images) of ipg names using glob() you can use array_slice() to get the 30 images.

 

images for page $p would be

$images = array_slice($all_images, ($p-1)*30, 30);

Edited November 10, 2014 by Barand

[tryingtolearn]

recently tackled the same thing, Sort of like paginating db results..

I did it by using array_chunk

This got me the page #s from the parent array and the files from the child arrays

 

 

 

Best way, not sure - but it worked - maybe it will work for you as well.

//where the files are located
$fileDir = 'yourDir/';
//set the file ext you want to grab jpg in this case
$allFiles = glob($fileDir . '*.{jpg,jpeg}', GLOB_BRACE);
//how many files to display on each page
$fileDisp = 30;

//create the pages how many files to show per page.
//array_chunk gave me the parent array being the # of pages and the child array being the content for each page
$pages = array_chunk($allFiles, $fileDisp);

//determine what page we are on
$currentPage = (int)$_GET['showpage'];

//display the files
foreach($pages[$currentPage] as $file){     
    echo $file.'<br />';
}

//create/display pagination links
//loop to create links for each page

//create the Previous link
$previousPage = (int)$_GET['showpage']-1;
if($currentPage > 0){    
    echo' <a href="page.php?showpage='.$previousPage.'">Previous</a> ';    
}

//display the numbered page links
for($i=0; $i< count($pages); $i++){
     echo' <a href="page.php?showpage='.$i.'">'.($i+1).'</a> ';    
}

//create the Next link
$nextPage = (int)$_GET['showpage']+1;
if($currentPage < count($pages)-1){    
    echo' <a href="page.php?showpage='.$nextPage.'">Next</a> ';    
}

[7blake]

Thankyou very much for the replies.

I've been trying a few methods tbh. I tried array_chunk first, but I don't know how to access in the interior arrays individually. It'd be alot easier.

 

My thought process is this.

 

//scan directory for images & count

// divide totalCount to provide pageCount

// Create an array of total pages and send through Ajax

 

//inAjax Create Container Pages and Page buttons

//when a page button is clicked, send corresponding page number back through ajax and grab the array_chunk array associated with that number, and display it

 

*alternative

 

// use the array_slice and use a combination of ranges related to the recieved page number to send the section of the Glob() array.

The problem is with Slice is, it just mucks up the way I am using it.

I'm having trouble with glob()'s sorting. I have images named "image1, image2, image3 -------- image 11, image 12, ect" It thinks the correct order is "image 1, image 10, image11 ++"

Sort of a bind. I tried sort() but I didn't utilize it right with glob() apparently, so I'll have to play about with it more.

 

Problems with Slice (from a total of 15 images)

On page 1 I recieve 5 images.

On page 2 I recieve 10 images (the addition 5 should be for page 3)

On page 3 I recieve the final 5(which also appear on page 2)

 

So that's awkward. Plus the odd sortment this is the major issue. I think array_chunk would be alot cleaner, I'm not too sure it matter which. But I'd like to understand how to use both, I'll concentrate on slice() atm. I was wondering if anyone could give me a heads up on what I'm doing wrong,.

 

This method might go completely against the standard for doing this. I'll eventually conform this structure to todays standard. Right now I'm more trying to just get this working the way it is. Though I'll be honest, Ill definitly have to re-configure it so I only need to make 1 ajax call. Right now it's too many. But that's something I can fix later once I understand how to do this portion right I think.

$(document).ready(function() {
    
         $.get(
            'images.php',
            {"pageNumbers" : 0},
            function(data) {
                $.each(data, function(k,v){
         $("#cartStatus").append("<div id='page" + v +"' class='pages'>"+ v + "</div>");
})

},
"json"
)
                 
    
         $.get(
            'images.php',
            {"pageNumbers" : 0},
            function(data) {
                $.each(data, function(k,v){
         $("#cartStatus").append("<div id='page" + v +"Number' class='pageNumber'>"+ v + "</div>");
})

},
"json"
)
                 
    

$('#cartStatus').on('click', 'div', function() {

        var nameId = $(this).attr("id");
        nameId = nameId.replace("Number", "");
        
        $(".pages").fadeOut();
        $("#" + nameId).empty().delay(400).fadeIn();
        
         $.get(
            'images.php',
            {"inputimages" : nameId},
            function(data) {
            
         $("#" + nameId).append(data);


},
"json"
)

});
        
    
     });

<?php
session_start();
$pageArray = array();

$all_images = glob("*.jpg");


$arrayCount = count($all_images);


$pageCount = ceil($arrayCount/5);

$startPageCount = 1;

for ($x = 1; $x <= $pageCount; $x++){
    $pageArray[] = $x;
    
    if($x == $pageCount){
         if(isset($_GET['pageNumbers'])) {
        echo json_encode($pageArray);
        }
    }
}



if(isset($_GET['inputimages'])){
        
    $pageLocation = $_GET['inputimages'];
    $selectedArray = str_replace("page", "", $pageLocation);
    
    $endPoint = intval($selectedArray) * 5;
    $startPoint = $endPoint - 5;
echo json_encode(array_slice($all_images, $startPoint, $endPoint));        
}
?>

[7blake]

tryingtolearn

 

Oh. Looking at your code, maybe I can do this the way you used arrayChunk.

foreach($pages[$currentPage] as $file){
echo $file.'<br />';
}

Ill give this a try. Sorry I didn't try using your code first, but Ill give this a go in the meantime I appriciate the share

[Barand]

Use natsort().

 

That will sort as image1, image2, image10 .. etc

[7blake]

Use natsort().

 

That will sort as image1, image2, image10 .. etc

Ah great.

 

Do you know what's wrong with my application of slice?

 

    $pageLocation = $_GET['inputimages']; // assume "page1"  // assume "page2"
    $selectedArray = str_replace("page", "", $pageLocation); // leaves 1 // leaves 2
    
    $endPoint = intval($selectedArray) * 5; // 1*5 == 5 // == 10
    $startPoint = $endPoint - 5;            // 0  // 5  ect
echo json_encode(array_slice($all_images, $startPoint, $endPoint));   

[Barand]

array_slice doesn't have an "end_point', it has a "start point" and "number of elements"

[7blake]

array_slice doesn't have an "end_point', it has a "start point" and "number of elements"

Well that's embarassing. Thanks!