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();
shutterReloaded.Init('sh');
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 );
$('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.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 works for Shutter Reloaded:
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.
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.
What about simpleviewer? I can’t get it to show the galleries when brought in from the infinite scroll. Otherwise everything is perfect.
what about highslide?
Please tell me.
WP Plugin is Highslide Integration
http://highslideintegration.scrollleiste.de/
JS site
http://highslide.com/
HighslideJS:
Thank you.
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~
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.
sorry, the sites are
plugins:
http://alexrabe.boelinger.com/?page_id=20
http://www.viper007bond.com/wordpress-plugins/vipers-video-quicktags/
js:
http://www.jeroenwijering.com/?item=JW_FLV_Player
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!
Thank you for the answer. Good luck with everything.
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!
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. ;-)
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?
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!
For the lightbox gallery:
(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?
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. :)
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?
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!
@ricky,
I’m not seeing the lightBox or tooltip plugins added to your page.
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???
Thanks for the great plugin,
but this plugin dose not show all articles in my blog.
before the update, it works perfectly fine…
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)
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
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…
First of all: Thank you for the nice plugin, it’s great!
Now: Is it possible to get it work with “FancyBox for WordPress” ?
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?
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
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.
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
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…
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!
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
ps: here’s the very rough site!
http://secondparallel.com/criblook/testing/
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
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 …
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!
How do I change the post loading effect? I would like each post to have a nice effect to it…
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
for typeface use:
_typeface_js.renderDocument()
Thanks to this fine gentlemen: http://stackoverflow.com/questions/645260/calling-typeface-js-on-html-fetched-by-jquery
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
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
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.
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?
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.
And what about FancyBox (It use lust a link to image, without rel=”lightbox”)?
http://wordpress.org/extend/plugins/sexycycle-for-wordpress/installation/
realy need to get the solution for this plugin
hello i have many plugin which load jquery
how can i disable the load of jquery for infinite-scroll?
thanks for help
;-)
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"]