The History of Infinite Scroll »

Plugin compatibility code

Many plugins run after the page has loaded and process existing content. Since Infinite Scroll dynamically adds new content to the page, sometimes you have to execute additional code to reinitialize those plugins.

For the plugins below, the following code goes in the Javascript Callback option.

Lightbox JS 1.0:
No compatibility code available.
Lightbox JS 2.0:

myLightbox.updateImageList();

Shutter Reloaded:

shutterReloaded.Init('sh');

Thickbox:

 tb_init( $('a.thickbox, area.thickbox, input.thickbox',this) );

1 Pixel Out Audio Player:
Compatible! Version 2.0, too.
Yahoo Media Player:

YAHOO.MediaPlayer.addTracks( this );

HighslideJS:

$('a.highslide',this).click(function() {  return hs.expand(this);})

WP-SimpleViewer:
Not compatible.
Flare Smith Feed Flare:
Not compatible. (relies on inline script tags)

ShareThis plugin:
Not compatible. (relies on inline script tags)

jQuery HoverIntent:

$('a.things',this).hoverIntent(......

SyntaxHighlighter Evolved:

SyntaxHighlighter.highlight(undefined,$('pre',this).get());

Smooth Scroll Links [SSL]

$('a',this).each(function(){
 ss.addEvent(this,'click',ss.smoothScroll);
});

To refer to the most recently added content:

    this;     // as of ver 1.1, the keyword this is the content wrapper (typically a DIV)
    $(this);  // the jQuery object including this
    $jQis('#infscr-page-'+INFSCR.currPage) // old 'n busted ver 1.0 style.

This entry was posted on Wednesday, January 30th, 2008 at 2:18 pm and is filed under Plugins. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

58 Responses to “Plugin compatibility code”

« Older Comments
  1. Kerry says:
    August 6, 2011 at 12:03 am

    Hey guys, I’ve been trying to figure out the callback JS feature, and I’ve gotten it working for yahoo media player(the code was different than recommended on here) as well as for a google+ button.

    However, I cannot figure out how to get the standard twitter tweet button to work, their javascript is unbelievably hard to understand and I don’t know what function to call to generate the new links with a picture.

    If anyone could help me out, it would be greatly appreciated.

  2. keepclif says:
    August 18, 2011 at 1:04 pm

    Hi, I have the same problem on my blog : the facebook, twitter & gplus buttons won’t show for the next posts.
    Does anyone have the solution ? Thank you !

  3. Neil says:
    September 28, 2011 at 9:26 pm

    Hey Everyone, I’ve got the scrolling to work, but my wp-audio player fails to load when the next page is fetched. It is the Martin Laine audio player. http://wpaudioplayer.com/

  4. Kenneth Sortland Myklebust says:
    October 5, 2011 at 8:15 am

    Ok, first of all: Thanks for a great plugin!
    Here’s my case: I’m using InfiniteScroll within Masonry in a Wordpress theme. I’m not using IS as a WP plugin, instead I’ve used the code provided at Masonry’s website.
    I am, however, using Lightbox Plus as a WP plugin. Naturally, it doesn’t work on the images on page 2 and onwards.

    I’m struggling to figure out what, and where to put a callback for this. I’ve googled, and read through all comments here, but can’t find it.

    Here’s my code:

    jQuery(document).ready(function($){

    var $container = $(’#container’);

    $container.imagesLoaded(function(){
    $container.masonry({
    itemSelector: ‘.item’,
    isAnimated: true,
    isResizable: true,
    });
    });

    $container.infinitescroll({
    navSelector : ‘#navigation’, // selector for the paged navigation
    nextSelector : ‘#navigation a:first’, // selector for the NEXT link (to page 2)
    itemSelector : ‘.item’, // selector for all items you’ll retrieve
    loading: {
    finishedMsg: ‘No more pages to load.’,
    }
    },
    // trigger Masonry as a callback
    function( newElements ) {
    var $newElems = $( newElements );
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
    $container.masonry( ‘appended’, $newElems, true );
    });
    }
    );

    });

    Seems logical to put it with the masonry callback, but whatever I do the whole thing breaks apart…
    Any ideas?

  5. wil says:
    October 13, 2011 at 8:50 am

    Hi,
    Nice plugin. Do you explain this please? “Analytics will not immediately capture the event, so custom configuration is required”. Does this mean that analytics do not know that a second page was also loaded even if this plugin does load a second page? If that is not the case (analytics thinks that another page was loaded), then this will be a remarkable solution to reduce “bounce-rate” in websites!!! What’s your opinion?

  6. Adam says:
    November 17, 2011 at 4:11 pm

    How do I use this with a Custom Post Type (CPT)? It was working with the WP “index.php” (default posts page), but it stopped working when I converted my posts to a CPT. Thanks!

  7. Brent says:
    November 27, 2011 at 2:21 pm

    I think this is cool, but for me, this biggest disadvantage is that it makes it impossible for the user to create a mental model of the site and it’s contents.

    An endless page stream of stuff is just that. Could be cool for some content, and it’s cool and clever code. But my mind wants to make ‘cards’ of web content. Maybe it’s just me, and it’s my problem. :D

« Older Comments