Slider not working and masonry class not loading

  • jorgonfla

    (@jorgonfla)


    4 years, 4 months ago

    I am trying to set up your plugin to load an infinite scroll for many post pages (excerpts).

    So far I get it to work using the grid template from my theme (CuteWP from ThemeDNA), but the classes to properly sort the rectangles are not passing to the layout and the slideshows on the excerpt of each post are loading as an image and when looking at the source code and comparing the plugin (ALM) strips the class (flexslider) and the javascript and it displays just an image.

    I found a page where you explain (https://wordpress.org/support/topic/incompatible-with-meta-slider/) and it did not work ( I believe because after using ALM the flexslider class and javascript line disappears on every post excerpt).

    You can see the grid properly working with the slideshows here:

    https://fashion.themembershipcentral.com/

    And the test version with ALM here:

    https://fashion.themembershipcentral.com/test/

    As you can see it does the infinite scroll fine but it messes up the grid and the class and javascript for the slideshows are gone on each item.

    If you want to quote me to simply fix both issues I might prefer to simply pay you to get this sorted out, I have wasted too much time on this already.

    I simply need that infinite scroll to work as the grid works in the site and eliminate pagination…

    • This topic was modified 4 years, 4 months ago by jorgonfla.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Darren Cooney

    (@dcooney)

    4 years, 3 months ago

    @jorgonfla
    ALM comes with Masonry built-in, you’ll just need to add your class as normal and add the masonry related shortcode parameters as seen in the link below.
    https://connekthq.com/plugins/ajax-load-more/examples/masonry/

    As far as the sliders, what have you tried that is not working?
    Did you write custom JavaScript to initiate the sliders with each Ajax load as mentioned in the support post from a few years back?

    Thread Starter jorgonfla

    (@jorgonfla)

    4 years, 3 months ago

    In that previous post a couple of years ago you mentioned a javascript function looking like this:

    jQuery(function($) {
    $.fn.almComplete = function(alm){
    $(‘.flexslider’, alm.el).flexslider({
    animation: “slide”
    });
    };
    });

    So I created a file named alm.js, put that code in it and gave the absolute path to it and the path to flexslider as well

    <script src=”https://fashion.themembershipcentral.com/wp-content/plugins/ml-slider/assets/sliders/flexslider/jquery.flexslider.min.js”></script&gt;
    <script src=”https://fashion.themembershipcentral.com/wp-content/themes/cutewp/alm_templates/alm.js”></script&gt;

    I called them pretty much in any place imaginable in the template (which is the template of my grid) and they do not return errors but do not work either. Just the first image of each slideshow shows, but the Ajax Load More plugin strips the javascript from them and the class to call them.

    For instance:

    on the working one I have <div id=”metaslider_9726″ class”flexslider”>

    and in the one with Ajax Load More running I have only <div id=”metaslider_9726>==$0

    So I am guessing I cannot call a function for flexslider when in the Ajax Load More version of it it is not even mentioned.

    I will try to do masonry and css from your plugin instead of using the grid template file and see if I get a better result. My guess is something is getting lost using the file from my theme and applying it to your default template.

    If this and the css for masonry are something very simple for you to fix just give me a quote to fix them. I am at my limit of knowledge about this and I do not have the time to fight it. That site is my business and I can’t start advertising until I get the infinite scroll running.

    Plugin Author Darren Cooney

    (@dcooney)

    4 years, 3 months ago

    I’m sorry but I’m not sure what you’ve tried and what is not working.
    You wouldn’t load the flexslider script file in the callback. It would load in your page footer/header.

    Here is the updated callback function, it changed two years ago.
    https://connekthq.com/plugins/ajax-load-more/docs/callback-functions/#complete

    window.almComplete = function(alm){
	$('.flexslider', alm.el).flexslider({
		animation: “slide”
	});
}
    • This reply was modified 4 years, 3 months ago by Darren Cooney.
    Thread Starter jorgonfla

    (@jorgonfla)

    4 years, 3 months ago

    I have been looking a little bit deeper into this issue and first, the callback did nothing.

    But as I look into the structure and the changes from the original post excerpt to what the ajax load renders I can see it turns the slideshow (flexslider) of each post and the slides into aria-live (accessibility features). It keeps just the first slide with a link but renders the rest of the slides as plain slides (whereas with the actual slider each slide had a link).
    And it removes the controls and it does not do auto-play.

    So somewhere in your script or in ajax, the shortcode for the flexslider is read, the javascript actually runs and the slideshow is changed into aria-live, it loses the arrows for prev and next and it loses the autoplay and change of slide and fade timing instructions.

    I do not want to have aria-live in my slides (that would probably do an audible read of the caption of the image or something like that).

    Where is that conversion to aria located? how can I disable that?

    So the issue is not calling back each time ajax loads content a slider, apparently the slider is called on each post, it is just that it is changed to a completely different type of slider and it is disabled.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Slider not working and masonry class not loading’ is closed to new replies.