javascriptjquerytumblrgetelementbyidinfinite-scroll

Adding function to infinite-scroll callback


I have a tumblr in which I'm loading different urls of images based on the size of the post they appear in, using javascript and tumblr's theme operators {photoUrl-250}, {photoUrl-400} etc.. User bfred.it showed me how, but I soon encountered a problem with his solution, namely that it won't work as-is with Paul Irish's infinite-scroll. I sort of understand what I need to do, i.e. call the script again after infinite-scroll has finished loading, but I'm having problems wrapping my mind around the "how".

My understanding of javascript is rather poor, but this is how far I've come modifying the code bfred.it generously helped me out with.

This is how my posts are set up:

<div id="content">
    {block:Posts}
        <div class="brick">
            <div class="article {block:Tags} {Tag} {/block:Tags}">
                {block:Photo}
                    <div id="postid-{PostID}" data-images="{PhotoURL-250},{PhotoURL-400},{PhotoURL-500},{PhotoURL-HighRes}" data-classes="{TagsAsClasses}"></div>
                    <script>
                    findPhotoUrl("postid-{PostID}");    
                    </script>
                {/block:Photo}
            </div>
         </div>
     {/block:Posts}
 </div>

and this is the function (which really should be called insertImage or something rather than findPhotoUrl, but bear with me) being called to add the image:

function findPhotoUrl(a)
    {
    var el=document.getElementById(a);    
    var sizes = el.getAttribute('data-images').split(',');
    var classes = el.getAttribute('data-classes');
    var imageIndex = classes.match(/\barticle(\d)\b/);
    if (!imageIndex){
        imageIndex=[0,1]//default to smallest size if nothing is specified
        }
    el.innerHTML='<img src="'+sizes[imageIndex[1]-1]+'" alt="'+imageIndex[1]+'">';
};

The above works splendidly, but the problem is I don't get where and how I'm supposed to call the findPhotoUrl() in infinite-scroll...

Below is my infinite-scroll set-up. Note that the itemSelector is brick, the grandparent of the div which I want to pass as the argument for my function... but how? (I already have a callback for the packery library after the images have been loaded)

$container = $('#content');
/* INFINITESCROLL */
    $container.infinitescroll({
        navSelector:    ".pagination",
        nextSelector:   ".pagination a:first-child",
        itemSelector:   ".brick",
    }, function( newElements ) {
$(newElements).imagesLoaded( function() {
    pckry.appended( newElements ); drawSpaces();pckry.layout();
    });
});

Solution

  • This is what I did: I added an id to the "brick" div which would have the same number as the div postid-XXXXXX. using the theme operator {PostID}.

    <div class="brick" id="brickid-{PostID}">
    

    My infinite-scroll code then passes on the "postid"+number to the function:

    $container = $('#content');
                /* INFINITESCROLL */
                $container.infinitescroll({
                    navSelector:    ".pagination",
                    nextSelector:   ".pagination a:first-child",
                    itemSelector:   ".brick",
                    //maxPage:        3,
                    //prefill:        true,
                }, function( newElements ) {
                    for (var i in newElements){
                        var b=newElements[i].id;
                        var c =b.substr(b.indexOf("-")+1);
                        findPhotoUrl("postid-"+c);
                    }                    
        $(newElements).imagesLoaded( function() {
            pckry.appended( newElements ); drawSpaces();
            pckry.layout();
        });
    });
    

    This works great, though it seems to ruin any post which doesn't contain a picture, but that probably won't be too hard to fix.