pagination for images reading from csv file

Question

After a lot of search I am not able to find a proper image gallery with pagination that will suitable for my problem.

I have web page that shows lots of images(unlimited) as gallery. I have applied some of the image gallery plugins. But problem with this plugins is like, loading of too many images on web page takes lot of time and if I go directly to last page having pagination applied then it takes lot of time to load the images on last page as it loads all the images on pages previous to that. Lazy load is also not helpful in this case.

I am showing the images using csv file as below:

<ul id="itemContainer">
            <?php
            $file_handle = fopen("gallery.csv", "r");
            while (!feof($file_handle)) {
            $lines_of_text[] = fgetcsv($file_handle, 1024);
            }
            fclose($file_handle);
            foreach ( $lines_of_text as $line): 
            ?>
            <li>
            <a href="<?php print "photos/".$line[0].".jpg"; ?>" data-lightbox="imggallery" 
            data-title="<?php print $line[0]." ".$line[1];?>">
            <img src="<?php print "photos/".$line[0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
            </a>
            </li>
            <?php endforeach; ?>      
      </ul>

To overcome the problem I am trying to show images with pagination having url like url?page=num_of_page so that the images on current page will not wait to load the images previous to that page and gets load faster.

But I don't know how should I do pagination(like this url?page=num_of_page ) in this case?

Any help please?

Answer 1

// Open File to read
$file = fopen("gallery.csv","r");

    while(! feof($file))
    {
      // Store each line in $data
      $data[] = fgetcsv($file);
    }

    // Get Current Page
    $current_page = ($_GET['page']) ? $_GET['page'] : 1;
    // Records Per Page
    $per_page = 10;


    $start = ($current_page - 1) * ($per_page + 1);
    $offset = $per_page + 1;
    $total_pages = count($data) / $per_page;

    //Slice array according to our page
    $data = array_slice($data, $start, $per_page);

    ?>

    <ul id="itemContainer">
        <?php for($i = 0; $i < count($data); $i++) { ?>
            <li>
                <a href="<?php print "photos/".$data[$i][0].".jpg"; ?>" data-lightbox="imggallery" data-title="<?php print $data[$i][0]." ".$data[$i][1];?>">
                    <img src="<?php print "photos/".$data[$i][0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
                </a> 
            </li>
        <?php } ?>      
    </ul>
    <?php
    // Show Total Pages
    for($i = 0; $i < $total_pages; $i++){
        echo '<a href="?page='.($i+1).'">'.($i+1).'</a>';
    }

Hope it will work.

Answer 2

Finally got the solution as I wanted with the help of @Touqeer Shafi and PHP pagination :)

Here is the code

<?php
     // Open File to read
        $file = fopen("gallery.csv","r");
        while(! feof($file))
        {
          // Store each line in $data
          $data[] = fgetcsv($file);
        }

        $limit = 20;
        $total_pages = count($data);
        $stages = 3;
        $page = (int) $_GET['page'];
        if($page){
        $start = ($page - 1) * $limit;
        }else{
        $start = 0;
        }

        //Slice array according to our page
        $data = array_slice($data, $start, $limit);

        ?>

        <ul id="itemContainer">
            <?php for($i = 0; $i < count($data); $i++) { 
            ?>
                <li>
                    <a href="<?php print "photos/".$data[$i][0].".jpg"; ?>" data-lightbox="imggallery" data-title="<?php print $data[$i][0]." ".$data[$i][1];?>">
                        <img src="<?php print "photos/".$data[$i][0].".jpg"; ?>" alt="image" style="width:140px; height:140px; border: 1px solid #00C;">
                    </a> 
                </li>
            <?php } ?>      
        </ul>
        <?php

    // Initial page num setup
    if ($page == 0){$page = 1;}
    $prev = $page - 1;
    $next = $page + 1;
    $lastpage = ceil($total_pages/$limit);
    $LastPagem1 = $lastpage - 1;

    $paginate = '';
    if($lastpage > 1)
    {

    $paginate .= "<div class='paginate'>";
    // Previous
    if ($page > 1){
    $paginate.= "<a href='?page=$prev'>previous</a>";
    }else{
    $paginate.= "<span class='disabled'>previous</span>"; }

    // Pages
    if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
    {
    for ($counter = 1; $counter <= $lastpage; $counter++)
    {
    if ($counter == $page){
    $paginate.= "<span class='current'>$counter</span>";
    }else{
    $paginate.= "<a href='?page=$counter'>$counter</a>";}
    }
    }
    elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
    {
    // Beginning only hide later pages
    if($page < 1 + ($stages * 2))
    {
    for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
    {
    if ($counter == $page){
    $paginate.= "<span class='current'>$counter</span>";
    }else{
    $paginate.= "<a href='?page=$counter'>$counter</a>";}
    }
    $paginate.= "...";
    $paginate.= "<a href='?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='?page=$lastpage'>$lastpage</a>";
    }
    // Middle hide some front and some back
    elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
    {
    $paginate.= "<a href='?page=1'>1</a>";
    $paginate.= "<a href='?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
    {
    if ($counter == $page){
    $paginate.= "<span class='current'>$counter</span>";
    }else{
    $paginate.= "<a href='?page=$counter'>$counter</a>";}
    }
    $paginate.= "...";
    $paginate.= "<a href='?page=$LastPagem1'>$LastPagem1</a>";
    $paginate.= "<a href='?page=$lastpage'>$lastpage</a>";
    }
    // End only hide early pages
    else
    {
    $paginate.= "<a href='?page=1'>1</a>";
    $paginate.= "<a href='?page=2'>2</a>";
    $paginate.= "...";
    for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
    {
    if ($counter == $page){
    $paginate.= "<span class='current'>$counter</span>";
    }else{
    $paginate.= "<a href='?page=$counter'>$counter</a>";}
    }
    }
    }

    // Next
    if ($page < $counter - 1){
    $paginate.= "<a href='?page=$next'>next</a>";
    }else{
    $paginate.= "<span class='disabled'>next</span>";
    }

    $paginate.= "</div>";

    }
    //echo $total_pages.' Results';
    // pagination
    echo $paginate;
        ?>