how to load more images from a folder using php jquery ajax

Question

i have multiple folders and all folders contain some images upto 20 images. in my html page i want to show first 5 images and show click to view more 15 and when the user click that link it will show next 15 images

but till now i can only fetch all the images at a time here is my code

     <?php
    $dirname = "img/outlets/".$service_type."/".  $outlet_name ."/snaps/";
    $images = glob($dirname."*.jpg");
    foreach($images as $image)
   {
     ?>
   <a href="<?php echo $image ?>" class="imageHover">
   <img src="<?php echo $image ?>" class="img-responsive" />
   </a>
   <?php 
   } 
     ?>

score 1 · Answer 1 · edited May 23 '17 at 12:06

I am sorry for not being supportive or all but I think you should ask or research about "pagination". What you are asking is a definition of pagination.

Actually you are asking , "How do I implement pagination ?"

http://codular.com/implementing-pagination

http://code.tutsplus.com/tutorials/how-to-paginate-data-with-php--net-2928

and here is some code you can try to implement simple pagination

try {

// Find out how many items are in the table
$total = $dbh->query('
    SELECT
        COUNT(*)
    FROM
        table
')->fetchColumn();

// How many items to list per page
$limit = 20;

// How many pages will there be
$pages = ceil($total / $limit);

// What page are we currently on?
$page = min($pages, filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT, array(
    'options' => array(
        'default'   => 1,
        'min_range' => 1,
    ),
)));

// Calculate the offset for the query
$offset = ($page - 1)  * $limit;

// Some information to display to the user
$start = $offset + 1;
$end = min(($offset + $limit), $total);

// The "back" link
$prevlink = ($page > 1) ? '<a href="?page=1" title="First page">&laquo;</a> <a href="?page=' . ($page - 1) . '" title="Previous page">&lsaquo;</a>' : '<span class="disabled">&laquo;</span> <span class="disabled">&lsaquo;</span>';

// The "forward" link
$nextlink = ($page < $pages) ? '<a href="?page=' . ($page + 1) . '" title="Next page">&rsaquo;</a> <a href="?page=' . $pages . '" title="Last page">&raquo;</a>' : '<span class="disabled">&rsaquo;</span> <span class="disabled">&raquo;</span>';

// Display the paging information
echo '<div id="paging"><p>', $prevlink, ' Page ', $page, ' of ', $pages, ' pages, displaying ', $start, '-', $end, ' of ', $total, ' results ', $nextlink, ' </p></div>';

// Prepare the paged query
$stmt = $dbh->prepare('
    SELECT
        *
    FROM
        table
    ORDER BY
        name
    LIMIT
        :limit
    OFFSET
        :offset
');

// Bind the query params
$stmt->bindParam(':limit', $limit, PDO::PARAM_INT);
$stmt->bindParam(':offset', $offset, PDO::PARAM_INT);
$stmt->execute();

// Do we have any results?
if ($stmt->rowCount() > 0) {
    // Define how we want to fetch the results
    $stmt->setFetchMode(PDO::FETCH_ASSOC);
    $iterator = new IteratorIterator($stmt);

    // Display the results
    foreach ($iterator as $row) {
        echo '<p>', $row['name'], '</p>';
    }

} else {
    echo '<p>No results could be displayed.</p>';
}

} catch (Exception $e) {
echo '<p>', $e->getMessage(), '</p>';
}

Simple PHP Pagination script

thank you for suggestion but i have all my images in folder not in database to pull out and display @Rishiraj Purohit — priyabrata, Oct 09 '15 at 19:47
the only way i see is you number your images and then use a for loop in your own code to get the individual images. I am not sure if you should make those much calls using php(thinking about efficiency). If I were you, I would call all the images and will display only five and hide the rest using jquery. This way you make only one call and get all images and you can do whatever kind of pagination you want using jquery. consider this algo: 1. Set a url parameter(@_GET) like index.php?id=1to5 2. Get value using php 3. display only those images using jquery 4. on view more,change url parametr — Rishiraj Purohit, Oct 10 '15 at 11:21

score 0 · Answer 2 · answered Oct 09 '15 at 19:12

If I understood you correctly, you want your first page to display 5 images. Then, after clicking on a link, you want the same page to show the remaining images (from 5 up until the number of images in the folder – maybe 20 in your case).

I've been a bit verbose just so that it's clear. I've also left you echoing file paths as your code specifies, but presumably you're going to want to turn these into URLs. I'll leave that to you.

Try something like this:

<?php 

$dirname = "img/outlets/".$service_type."/".  $outlet_name ."/snaps/";
$images = glob($dirname."*.jpg");

$initial_images = 5; // However many you want to display on the inital load

// Get the starting image and the end image array keys
if($_GET['show_all_images']){ // Check the the browser sent a query parameter
    // We've been asked to display more

    // Get the array index of the first image. Remember that arrays start at 0, so subtract 1
    $first_image_index = $initial_images - 1; 

    // Get the array index of the last image
    $last_image_index = count($images);
}
else{
    // We're on the inital load

    $first_image_index = 0;
    $last_image_index = $initial_images - 1;
}

// Iterate the glob using for. We want to specify an array key, so it's easier here to use for rather than foreach (which is the right solution most of the time)
for ($i=$first_image_index; $i < $last_image_index; $i++):?>

    <a href="<?php echo $images[$i] ?>" class="imageHover">
    <img src="<?php echo $images[$i] ?>" class="img-responsive" />
    </a>

<?php endfor;?>

    <?php if($_GET['show_all_images']): // Display a 'show less' link?>
    <a href="?">Show less</a>
<?php else: ?>
    <a href="?show_all_images=true">Show more</a>
<?php endif; ?>

thank @shankie_san,it works fine but in my case i have a url like http://yourdomain/user and user is dynamically change through htaccess ie. profile.php.so when i click on show more the url not change to ?show_all_images=true and the light gallery opend up.what should i do — priyabrata, Oct 17 '15 at 18:01

score 0 · Answer 3 · answered Oct 09 '15 at 21:04

A simple way is to name images to end with indexed. Example being img_1.

You can then use ajax to fetch the last 15 images when user clicks on view more.

But this approach is very basic and is not scalable. As other answers suggest you can mix pagination with indexed image name approach

how to load more images from a folder using php jquery ajax

3 Answers3