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 
   } 
     ?>

Answer 1

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

Answer 2

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; ?>

Answer 3

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