CODEWITHSUNDEEP
javascriptjquerytumblr
user3601808
user3601808

Reputation: 1

Custom Tumblr photosets with infinite scrolling

I've been wondering how I could get this code for custom tumblr photoset sizes to work with infinite scrolling

  <script type="text/javascript">
    /* Photoset Resize Code by Kevin - EXCOLO.TUMBLR.COM */
    $(document).ready(function() {
    function photosetResize() {
        $('iframe.photoset').each(function(){
            var newSize = 200;
            var newSrc = $(this).attr('src').replace('500',newSize);
            $(this).attr('src', newSrc).width(newSize);        
            var high = $(this).css('height');
            var calculate = parseInt(high, 10)* newSize/500;
            $(this).css('height', calculate);
        });
    }
    photosetResize();

    });
</script>

Upvotes: 0

Views: 333

Answers (1)

mikedidthis
mikedidthis

Reputation: 4897

I think you would need to modify it to accept a jQuery object / collection:

$(document).ready(function() {

var $iframes = $('iframe.photoset');

function photosetResize($iframes) {
    $iframes.each(function(){
        var newSize = 200;
        var newSrc = $(this).attr('src').replace('500',newSize);
        $(this).attr('src', newSrc).width(newSize);        
        var high = $(this).css('height');
        var calculate = parseInt(high, 10)* newSize/500;
        $(this).css('height', calculate);
    });
}

photosetResize( $iframes );

});

You will need to find the new photosets when infinite scroll has completed via its callback.

var $newIframes = $(arrayOfNewElems).find($iframes.selector);

Hope that helps!

Upvotes: 3

Related Questions