Geek Answers Handbook

Running a Javascript loop inside the "row" boot line

I'm trying to pull the last 12 tumblr posts to a website and maintain a bootstrap structure, but I can't figure out how to make the loop pull out different photos for each span4. Right now it is pulling 12 lines, each photo is repeated 3 times, I would like it to be 4 rows of 3 photos, where each of them is different. Can anyone help here?

function formatPhotoHTML(post) {
    var html = '<div class="container">';
    html += '<div class="row">';
    html += '<div class="span4">';

    for (var i = 0; i < post.photos.length; i++) {
        var photo = post.photos[i] ;
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
    }

    html += '</div>';
    html += '</div>';

    return html;
}

function appendPostToPage(post) {
  $('.postspot').append(post);
}

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}


$(document).ready(function() {
  getPosts();
});
+4
source share
3 answers

You see 12 lines, and each photo is repeated 3 times because you tell her about it. therefore, to show four lines and each photo once, delete the duplicate code inside your function.

function formatPhotoHTML(post) {
var closeDivNow =3;
var html = '<div class="container">';
    for (var i = 0; i <=post.photos.length; i++) {
    if(i%3 == 0 || i==0 ){
               html += '<div class="row">';
        }
        var photo = post.photos[i] ;
            html += '<div class="span4">';
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>';

        if(i%3 == 0 || i==0 && i == closeDivNow){
                  closeDivNow = closeDivNow + i;
                  html += '</div>';
            }
    }
    html += '</div>';
return html;
}
+2

div.row" , .

, , :

function formatPhotoHTML(post) {
    var html = '<div class="container">';

    var photos_per_row = 3;
    for(var row = 0; row < post.photos.length; row += photos_per_row)
    {
        html += '<div class="row">'; // open div.row
        for(var i = row; i < (row + photos_per_row); i++)
        {
            var photo = post.photos[i];
            html += '<div class="span4">'; // open span4
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>'; // close span4
        }
        html += '</div>'; // close div.row
    }

    html += '</div>'; // close div.container
    return html;
}

. .

+1

OK, so you are doing 12 posts here:

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}

You can use the modulas operator to work every time you loop three messages, for example:

var html = '<div class="container">';

for (var i = 0; i < 12; i++) {

        if( (i%3 == 0 ){

           html += '<div class="row">'; // opening row every 3
        } 

        html += '<div class="span4">';
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';

        if( i%3 == 2 ){

           html += '</div>'; // closing row every 3
        } 



}

html += '</div>'; //closing container

Mina is a little rude, but this should work ...

0
source

More articles:


All Articles