如何限制畫廊一次顯示的行數

Question

我有一個用php目錄生成的圖庫。

我只想顯示2行，每行4張圖像，所以總共顯示8張圖像。 底部將有一個“顯示更多”按鈕。

當用戶單擊按鈕時，將再加載2行。

如何限制行數？

jQuery會成為前進的道路嗎？

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

Answer 1

這里有兩個問題：

如何限制php腳本創建的行數

您需要使用array_splice($files, 0, 8)來拼接$files數組

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

?>

然后，您可以使用可以從請求參數生成的$offset變量“分頁”圖像列表：

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

用戶單擊按鈕時如何加載新圖像

jQuery可能是異步加載的方式。

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
  });
});

這只是您應該探索的邏輯的一部分。 請不要只復制並粘貼代碼。

Answer 2

您將首先顯示所有圖像，然后使用jquery隱藏期望首先顯示的圖像8。然后單擊“顯示更多”時，其他8個圖像將一一顯示。 它可能為您工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    i=7;
    $(".w3-col.m3").hide();
    $(".w3-col.m3").slice(0,7).show();
    $(".show_more").click(function(){
        i=i+8;
        $(".w3-col.m3").slice(0,i).show();
    });
});
</script>
<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 . '" width="20px" onclick="onClick(this)" class="w3-hover-opacity"/></div>';
}

?>

  </div>
  <a class="show_more">Show more</a>
</div>