无限滚动的tumblr自定义照片集大小

Question

I've been struggling a bit with javascript lately and to be honest: I have not really a clue about it.

The posts on my tumblr have a width of 350px, but because the photosets are using iframes, I was looking for a different solution on photosets and found this code:

<script type="text/javascript">
//This will change the source address and display the correct size.
    $newElems.imagesLoaded(function(){
            $(".photoset").each(function() { 
        var newSrc = $(this).attr("src").replace('500','350');
        $(this).attr("src", newSrc);       
    });
}
//This will get the new size of the iframe and resize the iframe holder accordingly.
$newElems.imagesLoaded(function(){
    $(function(){
    var iFrames = $('.photoset');
    function iResize() {
        for (var i = 0, j = iFrames.length; i < j; i++) {
            iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
        }

        if ($.browser.safari || $.browser.opera) { 
            iFrames.load(function(){
                setTimeout(iResize, 0); 
            });

            for (var i = 0, j = iFrames.length; i < j; i++) {
                var iSource = iFrames[i].src;
                iFrames[i].src = '';
                iFrames[i].src = iSource;
            }
        } else {
            iFrames.load(function() {
                this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            });
        }
    });
}

It's working perfectly fine when I go to my blog.
Now we come to my problem: My tumblr uses an infinite scroll plugin . And whenever I scroll down, a new bunch of pictures gets loaded and if there is a photoset loaded, it's not resized anymore , it's being displayed in the default size.

I've been searching for a solution for ages, tried to tweak the javascript codes but I don't understand anything of it. The only thing I've found online was this , which is not helping either and I really hope someone can help me here, I'd be more than grateful.

Thank you in advance!

Answer 1

With infinite scroll you need to apply any methods used on your existing content to your new content, in this case its iFrames() and .photosets . This can be done via the callback supplied by infinite scroll.

As per the documentation ( http://www.infinite-scroll.com/ ):

$('#content').infinitescroll({
    navSelector  : "div.navigation",
    nextSelector : "div.navigation a:first",
    itemSelector : "#content div.post" },
    // callback
    function( $newElems ){
    // Do stuff to new posts / $newElems
    });
});

$newElems will contain any new content added to the dom. Now use your methods directly on the new content only.

I would suggest reworking iFrames() so it accepts an array of elements, so it can be called more than one.