如何使用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

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