Как ограничить количество строк, отображаемых одновременно для моей галереи

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

Вы должны были бы сращивать вам $files массив с 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>'; 
} 

?> 

список изображений с $offset переменной, которая может быть сгенерирован из запроса Params Затем вы можете «постраничной»:

$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 hide images ожидать вначале 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>