jquery slideshow, trying to find a way to loop json data object of projects which contains 1 or more images per project

I kind of already asked a similar question before: how to stop an array iteration if an index contains an inner array to iterate, then continue And the answer worked for what the project was, which was using parent child relation for the cycle. But now the client has made it a little more difficult by requesting that they could change the the slide show when they needed (php output to JSON of course).

I have a slideshow that is supposed to cycle then loop through "featured" projects info while fading in and out 1 or more images per project info before fading into the next project. Simple... But now I need the projects to come from JSON data. And not only that, the design has changed to where there is no longer a parent child relation between the info and its images.

I have tried every which way I can, from using .each() to using setTimeout/setInterval, but I am not sure, as usual, if I am even approaching this correctly. All I managed to do was to spit everything at once. Please do not resolve this for me. I just want constructive insight and a possible point in the right direction.

JSfiddle Here w/ the full html, json and css

jquery

$(document).ready(function() {

$.getJSON('data/data.json'), function(data) {

    $.each(data.projects, function(index, value) {
        var project = this;
        var info = '<p class="slideImg">' + this.info + '</p>';
        var url = '<a href ="' + this.url + '">' + this.url + '</a>';
        var images = [];

        console.log(info);
        console.log(url);

        // get project images
        $.each(project.gallery, function() {
            var image = '<img src="' + this.src + '" alt="' + this.alt + '">';
            images.push(image); // ??
            console.log(image);
        });

        console.log('----------------------------------------');

    });

});