Repetition of Images
There are two factors that contribute to the repeating behavior of images. Firstly, as mentioned in another response, the loop counter is set to a hardcoded value of 20. This means that if you input five images, each image will be repeated four times. Changing the value of 20 to the length of the Imgs array will resolve this issue.
Secondly, the function GenerateItems() always produces results.
If there are 50 images in the array, display those images, 20 per page, and then stop.
This indicates that GenerateItems() should return an empty set (or not be called) once all 50 images have been displayed. A simple approach could involve using a global page count variable. In this codepen, I have added such a variable to limit the number of pages, like so:
var pagesServed = 0;
$(document).ready(function(){
$grid = $('#grid-content');
.....
function GenerateItems(){
console.log("generating items");
var items = '';
if (++pagesServed > 2) {
return items;
}
for(var i=0; i < Imgs.length; i++){
....
Rendering on the Server Side
In a practical scenario, you would likely be fetching a list of image links from your server, which leads to the second part of your query.
You can opt to render these divs on the server side instead. The GenerateItems() function would send an AJAX request to your backend to obtain the divs, rather than constructing them in javascript. The PHP code might resemble the following:
<?php
require_once __DIR__.'/vendor/autoload.php';
session_start();
$Imgs = [
'https://tympanus.net/Development/GridLoadingEffects/images/1.jpg',
'https://tympanus.net/Development/GridLoadingEffects/images/3.jpg',
'https://d13yacurqjgara.cloudfront.net/users/64706/screenshots/1167254/attachments/152315/SUGARSKULL-01.png',
...
];
$items = '';
for ($i=0; $i < 20; $i++){
$items .= '<div class="grid-item c' . ($i % 9) . ' wow fadeInUp" ><a href=""><img src="' . $Imgs[$i % count($Imgs)] . '" /></a></div>';
}
...
Subsequently, GenerateItems() would look somewhat like this:
function GenerateItems(){
console.log("generating items");
var fetched = fetch('http://localhost:8000').then(function(data) {
return data.text();
});
return fetched;
}
And the revealItems function would be adjusted to handle the Promise:
$.fn.revealItems = function($items){
var self = this;
var iso = this.data('isotope');
var itemSelector = iso.options.itemSelector;
$items.then(function($fetcheditems) {
console.log($fetcheditems);
$($fetcheditems).hide();
$(self).append($fetcheditems);
$($fetcheditems).imagesLoaded().progress(function(imgLoad, image){
var $item = $(image.img).parents(itemSelector);
$item.show();
iso.appended($item);
});
});
return this;
}
I have provided an example that demonstrates rendering these divs on the server side on GitHub. Please note that this is a basic example, and certain features like the WOW styling may not be fully functional, and the CORS support is minimal.
You would need to implement your own server-side logic to determine which images to return in each request. For instance, you could utilize session management to track the images already served, or accept query string parameters specifying the range of images requested.