How to apply my script to images as they load via infinite scroll?

Question

For my blog, http://seans.ws, I wrote a script that looks at the size of an image, and if it is wider than the default container size it figures out how much negative margin it needs to center it with the rest of the content.

This works great, but I have images loading in via infinite scroll, and they are not manipulated by my script.

My infinite scroll js: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

$(window).load(function() {
    var centerBigImages = $(function() {
        $('img').css('marginLeft', function(index, value){
        if($(this).width() > 660) {
            return -($(this).width() - 660)/2;            
        }
        return value;
    });
});

centerBigImages();

I took a look at this DOMNodeInserted equivalent in IE?, but it was a little over my js newb head :(

What does your infinite-scroll code look like? Does it have a callback that is run when new content is loaded? — Christofer Eliasson, Jul 01 '12 at 21:02
You'll probably need to add `centerBigImages` as a callback within your infinite scroll code. — Andrew, Jul 01 '12 at 21:04
Hi Christofer, it's using this: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js — Sean Thompson, Jul 01 '12 at 21:06
@SeanThompson Do you have an unminifed version of the JavaScript, or some documentation of it? — Christofer Eliasson, Jul 01 '12 at 21:08
No, I've been looking but it does not seem to be available :( — Sean Thompson, Jul 01 '12 at 21:12

Christofer Eliasson · Accepted Answer · 2012-07-01T21:19:48.010

1

After running a JS-beautifier on the minified script for the infite-scroll you are using, I was able to find this documentation in Japanese. Running Google Translate on that, from what I can see, you should be able to pass a callback-function as the first parameter when calling the SendRequest() method, which I believe you call for your infinite-scroll.

In that case, you should be able to pass centerBigImages() as the first parameter:

SendRequest(centerBigImages, ...your other parameters);

Update:

Poking around a bit more, I found this unminified version of the script. Unfortunately the code comments are in Japanese, but I guess you could run Google Translate on those as well for some additional information.

edited Jul 01 '12 at 21:19

answered Jul 01 '12 at 21:13

Christofer Eliasson

32,939
7
74
103

Ok, a little over my head, but I will try! Thank you Christofer :) I am actually just using the infinite scroll script by doing the following: – Sean Thompson Jul 01 '12 at 21:32
@SeanThompson In that case it will be tough. In order to provide a callback, you will have to host a copy of the script on your own server, so that you can modify it (to provide a callback). The problem is that it is a bit hard to show you how to without an unminified source. – Christofer Eliasson Jul 01 '12 at 22:02

score 0 · Answer 2 · answered Jul 01 '12 at 22:01

I've been toying with this idea lately as I've just gotten into customising some code for my tumblr blog (which uses infinite scrolling). It's a bit round-the-houses and I'm not sure how well DOMSubtreeModified is supported now or in future, but I figured I'd post for general interest.

var triggerChange = function(event) {
    //do stuff
    monitorChanges();
};

var monitorChanges = function() {
    //Notice the use of 'one' so modifications I make in doStuff does not also cause infinite loop
    jQuery('#outer').one('DOMSubtreeModified', triggerChange);
}

monitorChanges();

Best demonstrated in fiddle here: http://jsfiddle.net/zf7rG/5/

How to apply my script to images as they load via infinite scroll?

2 Answers2