Получите содержимое поста с фотографиями в tumblr через API, но упорядочите его по-другому для постов с фотосетами.

У меня есть код, который в настоящее время перебирает сообщения в блоге и выводит их как внутри элемента списка в виде изображения со ссылкой и текстом подписи, если он существует. Это отлично работает, но когда я запускаю код и появляются сообщения о фотосете, каждое изображение и подпись зацикливаются в соответствии с сообщениями в фотоблоге.

(Таким образом, если в фотонаборе 10 изображений и 1 подпись, каждое изображение и подпись выводятся 10 раз).

Вот мой исходный код, который работает:

// get tumblr posts and embed them. 
var postContent     = $('#tumblr-posts');
var getPosts = {};
getPosts.get = function(){
    var offSet = href * 10;
    $.ajax({
        url:"http://api.tumblr.com/v2/blog/jessicaharby.tumblr.com/posts?limit=11",
        dataType: 'jsonp',
        data: {
            api_key: _site._apiKey,
            tag: 'news',
            offset: offSet
        },
        success: function(results){
            var i = 0;
            while (i < results.response.posts.length) {
                var type = results.response.posts[i].type;
                var photoset = results.response.posts[i].photoset_layout;
                if (type == "photo") {
                    var photos = results.response.posts[i].photos;
                    var linkURL = results.response.posts[i].post_url;
                    var caption = results.response.posts[i].caption;
                    for (var j = 0; j < photos.length; j++) {
                        var imgURL;
                        if (photos[j].alt_sizes[1]) {
                            imgURL = photos[j].alt_sizes[1].url
                        }else{
                            continue;
                        }
                        postContent.append("<li><img src=" + imgURL + " /><p>" + caption + "</p></li>");
                    }
                i++;
            }
            console.log(results.response);
            postContent.find('a').attr('target','_blank');
        }
    });
}

getPosts.get();

Я пытался написать оператор else if, который фиксирует сообщения фотосета. Требуется доработка, но выглядит так:

else if(photoset != null) {
    for (var k = 0; k < photos.length; k++) {
        var imgURL;
        if (photos[k].alt_sizes[1]) {
            imgURL = photos[k].alt_sizes[1].url
        }else{
            continue;
        }
        postContent.append("<li><img src=" + imgURL + " /></li>");
    }
    postContent.append("<li><p>" + caption + "</p></li>");
 }else{
    console.log('some error')   
}

Таким образом, он должен отображать все изображения и одну подпись внизу сообщения (поэтому, я думаю, мне нужно все это в одном элементе списка). Я просто не уверен на 100%, как доработать петли.

Другая проблема заключается в том, что если я напишу if/else, если я думаю, что с моим текущим кодом первое if истинно, и поэтому сообщения будут потенциально повторяться, или else if может быть проигнорирован.

У меня есть две скрипки, с которыми можно экспериментировать/разветвлять и т. д.;

1) http://jsfiddle.net/lharby/bLveggwk/1/ перебирает все сообщения

2) http://jsfiddle.net/lharby/bLveggwk/3/ проходит только через посты с фотосетами.

Извините, что это не самый аккуратный вопрос. Если не понятно могу сделать рисунок, если поможет!

ИЗМЕНИТЬ

Решил сделать образ:

Сообщения Tumblr


javascript loops jquery ajax tumblr
person lharby    schedule 27.05.2015    source источник
comment
Просто уточню, вы хотите выводить все фото из фотосета, затем подпись, в один пост?   -  person mikedidthis    schedule 28.05.2015
comment
Да и к постам с фото нужно относиться как к обычному. Извините, если это не очень понятно @mikedidthis.   -  person lharby    schedule 28.05.2015
comment
@mikedidthis В конце концов, я сделал изображение (надеюсь, каждый из белых блоков должен быть LI. i. imgur.com/OqLu3nd.png   -  person lharby    schedule 29.05.2015

Ответы (1)


arrow_upward
2
arrow_downward

Я не уверен, что хорошо понял проблему, кстати, это решение http://jsfiddle.net/1bLrocj1/ работает?

значительная часть:

var set = [];
while (i < results.response.posts.length) {
    var type = results.response.posts[i].type;
    var photoset = results.response.posts[i].photoset_layout;
    if (photoset != null) {
        var photos = results.response.posts[i].photos;
        var linkURL = results.response.posts[i].post_url;
        var caption = results.response.posts[i].caption;
        for (var j = 0; j < photos.length; j++) {
            var imgURL;
            if (photos[j].alt_sizes[1]) {
                imgURL = photos[j].alt_sizes[1].url
            } else {
                continue;
            }
            set.push("<li><img src=" + imgURL + " /></li>");
        }
        if (caption) {
            set.push("<li><p>" + caption + "</p></li>");
            var subUl = document.createElement("ul");
            for (var k = 0; k < set.length; k++) {
                $(subUl).append(set[k]);
            }
            postContent.append(subUl);
            set.length = 0;
        }
    } else {
        console.log('some error')
    }
    i++;
}

CSS:

ul li {
    padding:20px;
    float:left;
    max-width:550px;
    background:#FFF;
}

ul li:last-child {
    margin:0 1px 30px 0;
}
person Lorenzo Cinque    schedule 30.05.2015
comment
Фантастическое спасибо. Мне удалось заставить это работать с фотосетами и обычными фотопостами. Мне пришлось сделать одну небольшую поправку, но очки на ваше усмотрение. В вашей скрипке вы выводите ul как прямой дочерний элемент другого ul, обычно он должен быть обернут внутри другого li для правильного вложения. Но большое спасибо, я очень ценю ваше время! - person lharby; 30.05.2015
comment
Ах, я не могу присудить награду до завтра! - person lharby; 30.05.2015
comment
Рад, что был полезен :) - person Lorenzo Cinque; 30.05.2015