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.

57 Responses to “Plugin compatibility code”

  1. BOLL says:

    This works for Shutter Reloaded:

    shutterReloaded.Init('sh');

    Though it seems the script needs more code to be executed, as it fails to display the half transparent shade over the entire page when more posts has been loaded. Something that the author of Shutter Reloaded might have to look into.

  2. Paul Irish says:

    Hmmm.. yeah i think that’s the best trick thats immediately obvious. It probably needs to revaluate the window height. Thanks for testing that out.

  3. Space Roach says:

    What about simpleviewer? I can’t get it to show the galleries when brought in from the infinite scroll. Otherwise everything is perfect.

  4. pinocchio says:

    what about highslide?
    Please tell me.

    WP Plugin is Highslide Integration
    http://highslideintegration.scrollleiste.de/

    JS site
    http://highslide.com/

  5. Paul Irish says:

    HighslideJS:

    $jQis('#infscr-page-'+INFSCR.currPage +' a.highslide').click(function() {
     return hs.expand(this);
    });
  6. pinocchio says:

    Thank you.

  7. pinocchio says:

    i inserted code in “Infinite Scroll Options > Javascript to be called after the next posts are fetched: ” but highslide js did not work.
    Do you have different thing?
    anyway, thank you~

  8. pinocchio says:

    I’m ugly English. So I hope you understand it.
    First, thank you for the solution about highslide.
    well, how about jw flv player? I try it but can’t find. help me, please.

  9. Paul Irish says:

    Thanks for the links, pinocchio. :)

    Right now infinite scroll cannot support those plugins. They inject <script> tags into the document, and the internal’s of infinite scroll are stripping out those tags.

    Next version I’ll release will have a workaround and will shoot to support those tags. Sorry and thanks!

  10. pinocchio says:

    Thank you for the answer. Good luck with everything.

  11. Jerry says:

    Hi Paul!

    I am in the process of building a tumblr-style site that makes use of “Viper’s Video Quicktags” that pinocchio mentions as well as your plugin. Have you got your above-mentioned workaround running yet? I could really use it. :)

    I should mention I literally cheered when I found your plugin because it’s *exactly* what I was looking for. Thanks for all the work you’ve put into this!

  12. Paul Irish says:

    Jerry,

    Sorry but as it stands, those plugins wont integrate. :(

    Viper should probably rewrite his scripts to abide by javascript coding standards a bit better. ;-)

  13. Shawn says:

    I have a problem with the audio player 2.0b6. It is not being loaded on any of the pages that scroll into view (multiple themes). In Firefox it just shows a blank area, in IE it shows like an excerpt and says ‘Audio clip: flash required’ – Anyone know the solution? What java code can i pass to load correctly?

  14. ricky says:

    Hi guys, does anyone have a Javascript Callback for lightbox gallery? Since I’ ve installed infinite scrool, the images don’t pop up anymore in the older posts!

    plugin: http://wordpress.org/extend/plugins/lightbox-gallery/

    my blog:

    http://www.visualjourney.eu

    BTW great JOB!

  15. Paul Irish says:

    For the lightbox gallery:

    	jQuery('a[rel*=lightbox]',this).lightBox();
    	jQuery('.gallery1 a',this).lightBox({captionPosition:'gallery'});
    	jQuery('.gallery1 a',this).tooltip({track:true, delay:0, showURL: false});
  16. Shawn says:

    (I fixed my audio player problem.)

    I use a plugin called Floatbox, http://randomous.com/floatbox/home
    I have a problem, the functions of it only work on the 1st page, and not on the 2nd, 3rd etc. that are scrolled into view. Anyone know a java code to load BEFORE or after that might fix this?

  17. Paul Irish says:

    Floatbox isn’t compatible right now… Their script could be hacked a bit to make it work… and i’d love to do that, but i’m quite busy right now so unless you’re paying up, I can’t help ya. :)

  18. Shawn says:

    New question, I’m using the Thesis theme w/teaser post boxes, and inf scroll shows the loading image, but never loads the next page. Anyone know a solution?

  19. ricky says:

    Adding one single post to my blog causes “infinite scroll” to load only one set of posts. Works well in categories, problem occurs only in the loop. I’m getting mad about this, since I can no longer post anything! removing on post from the firsts 2 sets gets the scroll working again.

    Any ideas?

    I’m using lightbox gallery plugin and this callback:

    jQuery(’a[rel*=lightbox]‘,this).lightBox();
    jQuery(’.gallery1 a’,this).lightBox({captionPosition:’gallery’});
    jQuery(’.gallery1 a’,this).tooltip({track:true, delay:0, showURL: false});

    my blog:

    http://www.visualjourney.eu

    Thank you guys!

  20. Paul Irish says:

    @ricky,

    I’m not seeing the lightBox or tooltip plugins added to your page.

  21. mike masters says:

    Your pluggin would be wonderful for my site, I have spent six hours trying to configure it for Thesis and I am just about to give up.
    Got a suggestion for me???

  22. hans says:

    Thanks for the great plugin,
    but this plugin dose not show all articles in my blog.
    before the update, it works perfectly fine…

  23. Calibretto says:

    many thanks for this nice plugin.

    is there a way, to make it work together with the read-more-right-here plugin?
    out of the box the read-more-right-here plugin doesn’t load after the first set of posts.

    i guess, that there is a line that has to trigger some sort of update.

    thanks for the help.

    (im using a fresh wordpress 3.0 installation, with the darwin-theme)

  24. Aaron says:

    hello, I can’t seem to get this to work, I think I’m stumped on where exactly this code goes in relation to my lightbox script…

    http://furniturevoyeur.com/

    love some input on where this goes in relation to my script

  25. Aaron says:

    Paul,

    To clarify, here is the code that I have in relation to lightBox…

    jQuery(document).ready(function($) {
    $(“a[href*='gif'], a[href*='jpg'], a[href*='jpeg'], a[href*='png'], a[href*='\\/photo\\/'][href*='tumblr_']“) .lightBox();
    });

    Not sure where exactly your code would go to work properly in a tumblr…

  26. Jeffrey says:

    First of all: Thank you for the nice plugin, it’s great!

    Now: Is it possible to get it work with “FancyBox for WordPress” ?

  27. danny says:

    Here is an odd situation. I was hoping someone could shed some light on it (if there is a fix).

    I have two domains: domain1.com (the main host), and domain2.com which is configured as a mirror of all content on domain 1.

    Everything works fine on domain1, but when i try domain 2, it will show me the loading graphic, and then that will disappear and no new content will load.

    Any ideas why a mirrored site wouldn’t function the same?

  28. auser says:

    Hi,

    I have this working perfectly fine.

    My issue is when I try to use CSS3 PIE with IE8. It works fine on page 1, but it CSS3 PIE doesn’t work on the rest of the pages. IE7 and Firefox work OK.

    Do you have any idea on why this is happening?

    Thanks

  29. adam says:

    hi

    trying to implement the infinite scrolling with masonry plugin and filtering.

    when i scroll and the next page loads if i filter to remove certain items the pages do not close up! they appear to filter independently of each other causing large gaps.

    at the moment i’m appending using the example http://desandro.com/demo/masonry/docs/infinite-scroll.html

    is there a way of loadingg the content in a more dynamic way? or anyway of fixing the filtering issue.

  30. turkpixel says:

    Hello all I am currently working on a music search script you can see here http://www.demo.turkpixel.com/music , I would like to use this scroll plugin , technically try to search an artist on search panel and result will display in one page, what I would like to do show first 5 result and add he load more something like http://tinysong.com/ how can i do that?
    Thanks for advance

  31. PatachouNewG says:

    Hi adam,
    did you find a way to scroll AND filter? I’m trying to do the same thing but when I load more item during the filter, these new items are going under the hidden item…

  32. Justin says:

    Hi. Thanks for making this. It works very well and is super easy to integrate. I have a compatibility question. Any tips for getting prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) to work? I’ve tried adding the prettyPhoto call in the callback but it breaks looking for a variable value. Any help would be greatly appreciated.

    Thanks!

  33. Peter says:

    HI, I’m building a new site with this plug but I can’t work out which CSS Selectors I should be using….can someone please help me?

    I’m using:

    Content CSS Selector: .post
    Post CSS Selector: .tab-panes
    Navigation Links CSS Selector: .bm_numberedPages
    Previous posts CSS Selector: .numberedPage

    and I’ve tried various other combinations but it’s nothings working…

    Thanks, Pete

  34. Nils says:

    hey,

    first of all thank you very much for this nice plugin.
    i am tryin to work with it with a custom secondary loop on my index.php.

    whole thing looks like this:

    ‘webdesign_projekt’, ‘posts_per_page’ => 3 ) ); ?>
    have_posts() ) : $loop2->the_post(); ?>

    here is the div.post

    i guess all settings about the css-selectors are correct since the whole things in general works.
    first i see 3 posts. when i sroll down the next 3 posts are loaded. problem is that these next 3
    are the same ones as the first three …!?
    and this happens endlessly … scroll down > again the 3 first posts … scroll down > again the 3 first posts

    so it would say it looks like the plugin shows me the first page of posts over and over again
    and cannot find the end.

    any ideas why this keeps happening?

    thanks in advance for any help or hints …

    cheers,
    nils

  35. Nils says:

    whoops. looks like my whole code got stripped out. sorry not so much of a commenter …
    how do i put it to make it visible and not getting stripped?

    thanks again for help …

  36. javier says:

    Hi, thanks and congratulations for this!
    I’d like to ask you how could this plugin be implemented in a WordPress Blog with multiple loops (I have a 3 columns layout: a main loop, a secondary loop and the sidebar).

    Thanks & kind regards!

  37. Brian says:

    How do I change the post loading effect? I would like each post to have a nice effect to it…

  38. Justin says:

    The callback compatibility code for prettyPhoto (http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) is as follows:

    $(“.pp_pic_holder, .pp_overlay, .ppt”).remove();
    $(“a[rel^='prettyPhoto']“).prettyPhoto(); // your prettyPhoto initialization

  39. Matt says:

    for typeface use:

    _typeface_js.renderDocument()

    Thanks to this fine gentlemen: http://stackoverflow.com/questions/645260/calling-typeface-js-on-html-fetched-by-jquery

  40. There is a problem with IE 8, when it scrolls to page 2, the first new post is adherent to the last of the page 1… If you select these two posts, then this visualization problem disappears… how can i fix it?

    You can see it on fasfashion.com

  41. Sebastian says:

    Hello,
    thanks for this great code and your examples.

    Can you please tell me, under wihich license infinite scroll javascript is?

    Is it under MIT?

    Thanks,

    Sebastian

  42. max engel says:

    has anyone managed to integrate the Twitter and FB JS buttons via callback? i am trying to do this on Tumblr, but am a bit of a newbie, and while the infinite scroll is working, i am having trouble crafting the callback part to reload the JS on subsequent pages to show the buttons.

  43. Paul says:

    Hi Paul,

    This is a really cool plugin.

    I’m wondering if it’s compatible to

    Exec-PHP
    http://wordpress.org/extend/plugins/exec-php/

    and

    jQuery Collapse-O-Matic
    http://www.twinpictures.de/jquery-collapse-o-matic-1-3/

    if so, could you tell me the javascript callback for them?

  44. balaji says:

    Thanks for the great plugin,

    I am using this plugin for my on site also i have added cufon fonts jquery script when i come on 2nd page then i am unable to load cufon.

    Please Suggest me how to solve the problem

    Waiting for your reply.

  45. Mixa says:

    And what about FancyBox (It use lust a link to image, without rel=”lightbox”)?

  46. billboc says:

    hello i have many plugin which load jquery
    how can i disable the load of jquery for infinite-scroll?
    thanks for help
    ;-)

  47. Ben Green says:

    Really great looking script and I’m keen to have it work properly, except that it’s currently loading my older posts on top of my already loaded posts, instead of beneath them. I do have quite a large footer at the bottom which I thought could possibly be the reason, but I have tested it with the footer not displayed and it does the same thing. I’ve included the debug report I got when it occurs. If you could spare a few minutes of your time to assess my problem, it’d be much appreciated. Thanks

    ["pathParse manual"]
    jquery.infinitescroll.js:171["Binding", "bind"]
    jquery.infinitescroll.js:171["math:", 1764, 916]
    pixel;r=194539827;fpan=0;fpa=P0-238616564-1312136094877;ns=0;url=http%3A%2F%2Fwww.pixelsandtea.com%2F;ref=http%3A%2F%2Fwww.pixelsandtea.com%2Fpage%2F2%2F;ce=1;je=1;sr=1920x1200x24;enc=n;ogl=;dst=1;et=1312484335823;tzo=-60;a.1=p-94D6e1NDscLvI;labels.1=comment-links;a.2=p-18-mFEk4J448M;labels.2=type.intensedebate.embed:-1Resource interpreted as Image but transferred with MIME type text/plain.
    jquery.infinitescroll.js:171["math:", 1896, 916]
    jquery.infinitescroll.js:171["math:", 1805, 916]
    jquery.infinitescroll.js:171["math:", 1654, 916]
    jquery.infinitescroll.js:171["math:", 1636, 916]
    jquery.infinitescroll.js:171["math:", 1301, 916]
    jquery.infinitescroll.js:171["math:", 1053, 916]
    jquery.infinitescroll.js:171["math:", 951, 916]
    jquery.infinitescroll.js:171["heading into ajax",
    Array[2]
    ]
    jquery.infinitescroll.js:171["Using HTML via .load() method"]
    jquery.infinitescroll.js:171["contentSelector",
    ​…​​
    ]
    jquery.infinitescroll.js:171["math:", 775, 916]
    jquery.infinitescroll.js:171["heading into ajax",
    Array[2]
    ]
    jquery.infinitescroll.js:171["Using HTML via .load() method"]
    /page/3/GET http://www.pixelsandtea.com/page/3/ 404 (Not Found)
    jquery.infinitescroll.js:171["Error", "end"]
    jquery.infinitescroll.js:171["Binding", "unbind"]