Question

I have this code successfully pulling images from Behance using Jquery Json:

$('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);

    });
});

they are pulling into the page, and currently showing as individual images. But how would I wrap all the images together in this code to make a slideshow? each image text represents where the image needs to be added

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

Answer 1

Why can’t you prepend/append the html you need to the var project_data = ""; variable?

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>';

EDIT:
Here is a simple way to approach this.

(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));