mandatory ajax loading breaks other script interaction

To be more specific, I am using Sage 8.5.1, plus a bower install of “original-owl-carousel#^2.2.1” with the following javascript in the “finalize” section under ‘home’ from Sage’s assets/scripts/main.js so that it will load as close to last as possible.

finalize: function() {
        // JavaScript to be fired on the home page, after the init JS
        $(".instagallery .ig-item").each( function () {
            $(this).removeClass("cols-4").addClass("col").removeAttr("style");
        } ).parent().addClass("owl-carousel owl-theme").owlCarousel(
            {
                loop: false,
                margin: 0,
                responsiveClass: true,
                autoplay: false,
                dots: false,
                nav: true,
                navText: [
                    "<i class='fa fa-caret-left fa-2x'></i>",
                    "<i class='fa fa-caret-right fa-2x'></i>"
                ],
                nestedItemsSelector: 'ig-item',
                responsive: {
                    0: {
                        items: 1,
                    },
                    576: {
                        items: 2,
                    },
                    768: {
                        items: 3,
                    },
                    1200: {
                        items: 4,
                    },
                    1600: {
                        items: 5,
                    },
                }
            }
        );
// ....more unrelated js follows this

Hi,
ajax option is added for speedup the page loading. and for your problem, there is already an option to display pictures as Carousel in the plugin setting. you can use that Carousel view if possible.
OR you can use the below jQuery function to run your code after loading the gallery items.

jQuery(document).ajaxComplete(function(){
	// it will execute when any ajax request is colmpleted.
});

in my case I am using my own carousel, because there are other carousels with different content on the same page, so for consistency I have chosen to do it this way — it is easier to style them consistently when they all use the same classes and structure.

I would just like a tickbox to disable the ajax-loader and use it the normal way — I have scripts that need to run after the content is loaded, in order to affect it. I’m willing to take the slight speed hit, as that content is way down on the page and largely won’t be seen until it is fully loaded anyway.

However I’ll try your other suggestion — I’ll see how well it works with putting that bit of loading inside the jquery ajaxComplete and get back to you on that.

Hello, I tried running the scripting within ajaxComplete() as you suggested, and it appears to work fine and I get the results I was expecting. Thank you for that. You may want to document this somewhere on the off chance someone else is doing something similar with needing to manipulate the photos somehow, after they get loaded into the DOM.

Cheers, and keep up the great work.