@forresto This solution worked great however The Designer UI seems to be broken so pasting it into the Designer’s > Home Page > Custom Code wasn’t working for me. I had to paste it into my Project’s Custom Code.
I also was having trouble with the script disabling the other functions on the page. When I noticed that if I just reloaded the page the content stayed put and the function returned. So I changed those last lines of code to add a page refresh:
// These 4 lines should reinitialize interactions
$(document).on(‘pjax:end’, function() {
Webflow.require(‘ix2’).init();
location.reload();
});
If you think it warrants it, the sample code may need to be updated.
Look at my post right above yours in the timeline. Add the line to reload the webpage. The refresh should maintain the location and reactivate the other functions of the site.
Unfortunately this isn’t working for me. Here’s a demo site that contains the functionality I’m trying to produce: https://pagination-tests.webflow.io/
I’m new to Webflow, so I realize that what I’ve created may not be the most efficient way to achieve this functionality. I’m open to suggestions & any help is appreciated.
Hm… the code you’ve got there seems to match what was provided. Where are you placing the script?
Look at your published code in Google Chrome (right click and “inspect”) and at the very bottom of the html you should be able to see the script you pasted into Webflow. If you don’t see the script at the bottom of the html it means the script isn’t being inserted properly by Webflow.
I had this problem. That’s why earlier in this thread I suggest pasting the code into the actual Project Settings and not into the Designer. It seems there’s a bug and scripts don’t make it out of the Designer.
Thanks, I read your posts above and pasted the code into the Footer Code section in Project Settings → Custom Code.
I can also see the script is at the bottom of the HTML in Chrome Inspect mode.
I’ve also verified that the script is in place by adding collection lists with and without the seamless-replace ID to my demo site. The script is working, but it’s also breaking the lightboxes.
I’m only a beginner with javascript and using Webflow too, I don’t work here. Okay, I’ve been looking at your shared pages as best I can without access to your Designer view, and as far as I can tell you’ve got some kind of bad “other added script” in your javascript or links to javascript. Like you inserted javascript without an <script> to start your java. If you inspect your code you can see that there are a bunch of Failure errors in the console all in red. And when you click on the errors it takes you to the script and it’s not formatted correctly missing all the <script> openers.
Those errors are causing this script to fail.
My suggestion would be to delete all the script you’ve tried to enter to the project and only insert this script and see if that will fix it. Otherwise you’re going to have to hunt through the script you’ve entered and find any un-matched closings and openings of <script> and </script>. One other option is to open a new project, only build out the pieces you exactly need and insert the above script. Are you using a script to insert your placeholder images? If so I’d just get rid of it and just link to one image that you have stored locally as a placeholder.
I totally understand, thanks again for your help troubleshooting this.
I see those errors too and I have no idea where they could be coming from because this script is the very first custom code that I have added to my site. Also bear in mind that I started creating this paginated lightbox grid on a client’s site and re-created it in the demo site to troubleshoot.
The images are coming from a Webflow Collection List, so I’d say that yes a script is involved, but it’s not a custom script that I inserted – it’s just the basic Webflow feature.
thanks for your code expertise here. I realised I have the same issue as @Sam_Hewa.
I have a page interaction which falls outside of the #seamless-replace div, which does not trigger when you cycle through the pagination pages.
In my case, I am dealing with a cms template page where I am filtering collection list items with 3 versions of the same collection list, showing and hiding them with conditions. I have therefore placed the seamless-replace id in the section .sec-other-projects-cms, in an attempt to target all 3 collection lists.
on further reading of this quite long feed, I have added your code to reinitialise page related animations. Thanks for this, the only issue now is the hover interactions inside the collection lists on the collection items do not work
<!-- Start seamless-pagination custom code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>
<script>
var containerSelector = '#seamless-replace';
$(document).pjax(
'.w-pagination-wrapper a',
containerSelector,
{
container: containerSelector,
fragment: containerSelector,
scrollTo: false,
timeout: 2500,
}
);
//Pjax navigation grab the attrs from the new page
pjax._handleResponse = pjax.handleResponse;
pjax.handleResponse = function(responseText, request, href, options) {
// get the new data-wf-page within the request text
var data_wf_page = request.responseText.match(/data-wf-page=\"([a-z 0-9]+)\"/);
if (data_wf_page && data_wf_page[1]) {
self.data_wf_page = data_wf_page[1];
}
pjax._handleResponse(responseText, request, href, options);
}
//Pjax navigation hooks for webflow interactions
$(document).on("pjax:complete", function () {
window.Webflow && window.Webflow.destroy();
// set the current data-wf-page to the new attribute
// before reinitializing interactions
$('html').attr('data-wf-page', self.data_wf_page);
window.Webflow && window.Webflow.ready();
window.Webflow && window.Webflow.require("ix2").init();
document.dispatchEvent(new Event("readystatechange"));
});
</script>
<!-- End seamless-pagination custom code -->
It would be amazing if you have a solution to this, and then it’s spot on! read only live
the paginated module is at the bottom of this cms page. Cheers
Hey, does someone encounter the problem of using this custom code + use webflow lightbox component?
The lightbox doesn’t open when this code is in use
If anyone has a solution it would help a lot! thanks.
Hi, my main problem with my cms slider pagination at the moment is that the whole page reloads when I click Next or Preview. Any ideas on how to fix that?
