I have a gallery page using the Image Photo Gallery Final Tiles Grid WordPress plugin.
I want the page/scroll to continuously repeat (so as a user scroll down the page the gallery is repeated.
The following script seems to do the repeating nicely but the images aren’t loading and I can’t seem to figure it out, any ideas?
<script>
jQuery(document).ready(function($) {
const $gallery = $(".final-tiles-gallery");
const originalContent = $gallery.html(); // Save the original gallery content
// Function to append the content again
function appendContent() {
$gallery.append(originalContent); // Duplicate the gallery content
// Re-initialize the gallery plugin after appending new content
setTimeout(function() {
// Trigger the gallery plugin to reprocess the newly added images
if (typeof jQuery.fn.ftgInit === 'function') {
$gallery.ftgInit(); // This is specific to the Final Tiles Gallery plugin
}
// Ensure the gallery layout is recalculated after new images are appended
const instance = $gallery.data('ftg-instance'); // Get the gallery instance
if (instance) {
instance.setCurrentColumnSize(); // Recalculate column size for layout
instance.setCurrentImageSizeFactor(); // Adjust image size factor for new content
instance.setCurrentGridSize(); // Adjust grid size for the new layout
instance.refresh(); // Recalculate and refresh layout
}
}, 100); // Adjust the timeout delay as needed
}
// Trigger infinite scroll
jQuery(window).on("scroll", function() {
const scrollPosition = jQuery(window).scrollTop() + jQuery(window).height(); // Current scroll position
const documentHeight = jQuery(document).height(); // Total document height
// If the user scrolls near the bottom, append more content
if (scrollPosition >= documentHeight - 100) {
appendContent();
}
});
});
Here’s the page if it helps…
Many thanks (in advance)!