0

このコードは、JqueryJsonを使用してBehanceから画像を正常にプルしています。

$('a.link').live('click', function () {
    h = window.location.hash.replace('#', '');
    $.getJSON("http://www.behance.net/v2/projects/" + h + "?api_key=" + api + "&callback=?", function (data) {
        var project_data = "";
        for (var i = 0; i < data.project.modules.length; i++) {
            if (data.project.modules[i].type == "image") { 
                project_data += '<img src="' + data.project.modules[i].src + '" />';
            }
            if (data.project.modules[i].type == "text") {
                project_data += '<p>' + data.project.modules[i].text + '</p>';
            }
        };

        $('.portfolio-details h3').html(data.project.name);
        $('.portfolio-details div').html(project_data);
        $('.portfolio-details').fadeIn(6000);

    });
});

それらはページに引き込まれ、現在は個別の画像として表示されています。しかし、スライドショーを作成するために、このコードですべての画像をまとめるにはどうすればよいでしょうか。各画像テキストは、画像を追加する必要がある場所を表します

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item"> each image </div>
<div class="item"> each image </div>
</div>
</div>
4

2 に答える 2

0

必要なhtmlをvar project_data = "";変数に追加/追加できないのはなぜですか？

var project_data = '<div id="myCarousel" class="carousel slide"><div class="carousel-inner">';

// Loop goes here...
project_data += '<div class="item"><img src="' + data.project.modules[i].src + '"> </div>';
// more code here
// end of loop

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

編集： これにアプローチする簡単な方法があります。

(function($) {
    var user = 'userNameGoesHere',
    api = 'apiKeyGoesHere', 
    project_str = "", 
    i = 0;

    var project_images, carousel;

    for(i; i <= 3; i += 1) {
        $.getJSON("http://www.behance.net/v2/users/" + user + "/projects?api_key=" + api + "&callback=?&page=" + i, function (data) {
            if ($.type(data.projects) === 'array') {
                $.each(data.projects, function(i, obj) {
                    project_str += '<a class="tips more-info link" data-placement="bottom" href="#' + obj.id + '">';
                        project_str += '<div class="span3 portfolioitem">';
                            project_str += '<img src="' + obj.covers['404'] + '">';
                            project_str += '<div class="portfolioitem-hoverinfo"> <h3>' + obj.name + '</h3> </div>';
                        project_str += '</div>';
                    project_str += '</a>';
                });
            }

            $('#portfolio-items').append(project_str);
        });
    }


    $('a.link').live('click', function () {
        var h = window.location.hash.replace('#', '');

        $.getJSON("http://www.behance.net/v2/projects/" + h + "?api_key=" + api + "&callback=?", function (data) {
            var project_data = "";

            // "data.project.modules" here throws an error on the first click... not sure why
            for (var i = 0; i < data.project.modules.length; i++) {
                if (data.project.modules[i].type == "image") { 
                    project_data += '<img src="' + data.project.modules[i].src + '">';
                }

                if (data.project.modules[i].type == "text") {
                    project_data += '<p>' + data.project.modules[i].text + '</p>';
                }
            }

            $('.portfolio-details h3').html(data.project.name);
            $('.portfolio-details div').html(project_data);
            $('.portfolio-details').fadeIn(6000);

            project_images = $('.portfolio-details').find('img');
            carousel = '<div id="myCarousel" class="carousel slide"> <div class="carousel-inner">';

            $.each(project_images, function(i, img) {
                carousel += '<div class="item"> <img src="' + img.src + '"> </div>';
            });

            carousel += "</div></div>";

            // Do something with the carousel - append somewhere or something
            $(document.body).prepend(carousel);
        });
    });
}(jQuery));
于 2013-01-27T00:21:17.647 に答える
0

あなたのhtmlには表示されない.portfolio-detailsので、次のように想定します.carousel-inner。

for (var i = 0; i < data.project.modules.length; i++) {
        ...
    $(".portfolio-details div").eq(i).html(project_data);
}
于 2013-01-27T00:19:00.230 に答える