如何限制我的图库一次显示的行数

Question

I have a gallery that is generated from a directory with php.

I'd like to show only 2 rows of 4 images each, so a total of 8 images. There would be a "show more" button at the bottom.

When the user would click the button then 2 more rows would load.

How can I limit the number of rows?

Would jQuery be the way to go?

<div class="w3-content w3-container w3-padding-64" style="margin-top:50px;">
  <h3 class="w3-center w3-text-white">Never Ending Light of Day</h3>
  <br>

  <!-- Responsive Grid. Four columns on tablets, laptops and desktops. Will stack on mobile devices/small screens (100% width) -->
  <div class="w3-row-padding w3-center">
<?php
// Find all files in that folder
$files = glob('uploads/*');

// Do a natural case insensitive sort, usually 1.jpg and 10.jpg would come next to each other with a regular sort
natcasesort($files);


// Display images
foreach($files as $file) {
   echo '<div class="w3-col m3"><img src="' . $file . '" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"/></div>';
}

?>
    
  </div>
</div>

</div>

Answer 1

There are two questions here :

How to limit the number of rows created by the php script

You'd need to splice you $files array with array_splice($files, 0, 8)

<?php
// Find all files in that folder
$files = glob('uploads/*');

// Do a natural case insensitive sort, usually 1.jpg and 10.jpg would come next to each other with a regular sort
natcasesort($files);

// get only 8 files
$files = array_splice($files, 0, 8);


// Display images
foreach($files as $file) {
   echo '<div class="w3-col m3"><img src="' . $file . '" style="width:100%" onclick="onClick(this)" class="w3-hover-opacity"/></div>';
}

?>

Then you can "paginate" the images list with an $offset variable that can be generated from request params :

$offset = $_GET["images_offset"] || 0; // should be a multiple of 8
$files = array_splice($files, $offset, 8);

How to load new images when the user clicks the button

jQuery could be the way to go to load asynchronously.

var offset = 0;
var url = "yourpageurl";
$('#yourbuttonidoranyselector').bind('click', function(){
  offset += 8;
  $.ajax(url + "?images_offset=" + offset, function(data){
    // append the new lines to the chosen container
  });
});

This is just a bit of the logic you should explore. Don't just copy and paste the code please.