Conditional script enqueue

  • Resolved mak1wp

    (@mak1wp)


    10 years, 7 months ago

    Hi,

    I’m having some trouble enqueuing isotope/masonry/infinite scroll scripts.

    I’m using wpquery for creating various blog and portfolio post layouts via a page builder. Theres various layout styles/columns, each one duplicated for isotope filter, masonry, fit rows, masonry + infinite scroll or fit rows + infinite scroll.

    I’ve tried to create one big script containing all these isotope options using various div classes on the layout templates, but with no success. (masonry responds slow and infinite scroll just doesn’t work)

    I can get the desired effect working by linking the script directly on the loop template used (and splitting up the isotope jquery functions), but I dont think this is recommended.

    the templates I’m referring to are not wordpress page templates, they are the post layout templates I’ve created, located in mytheme/loop-templates/portfolio or mytheme/loop-tempaltes/blog. So using the conditional if is page (page) will not work.

    does anybody know how to condition the script load for a custom page location like the one in my setup?

    Any feedback on this would be a really great help.

    Many thanks!

Viewing 1 replies (of 1 total)
  • Thread Starter mak1wp

    (@mak1wp)

    10 years, 7 months ago

    Righto, I’ve figured out a half decent way to do this, using one script page instead of load of individual ones. It loads more jQuery than loading them all separately but only a tiny bit.

    The above post suggesting masonry responded slow and infinite scroll didn’t work was wrong, I must have done something iffy.

    Simply split up the scripts (put them in one js file)…

    //Portfolio Masonry

jQuery(function($){
var $container = $('.portfolio-content-masonry');
$container.imagesLoaded( function(){
$container.isotope({
  masonry: {
    columnWidth: 0,
  }
});
});});

//Portfolio Infinite

jQuery(function($){
var container = $('.portfolio-content-infinite');

container.infinitescroll({
        navSelector  : '.page-numbers',    // selector for the paged navigation
        nextSelector : '.page-numbers a',  // selector for the NEXT link (to page 2)
        itemSelector : '.element',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/qkKy8.gif'
        }
      },
       function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function($){
          $newElems.animate({ opacity: 1 });
              container.isotope( 'appended', $newElems, true ); 

        });
      }
    );
});

    etc etc….

    call the classes on the page as needed….

    <div class=”portfolio-content portfolio-content-rows portfolio-content-infinite”>

    or

    <div class=”portfolio-content portfolio-content-grid”>

    etc etc…

    Make sure to enqueue the isotope, infinite scroll scripts, as well as the script you’ve just created with all your clearly classed functions.

    Hope this helps someone, took me ages to figure 😐

    Lastly – jQuery instead of $ – took me a while to figure that out too.

Viewing 1 replies (of 1 total)
  • The topic ‘Conditional script enqueue’ is closed to new replies.