Titanium Appcelerator Photo Gallery (Display grid of photos based on list from server)

Question

I'm having some problems with the Photo Gallery view in Titanium Appcelerator (iPhone app). I don't really have any example code at the moment to share because I'm at a loss for exactly how this is supposed to function.

I just want to call my server for a list of images, and show these images in a grid as thumbnails that can be viewed in full screen, like you would normally expect from a phone photo gallery.

In all the example code I've looked at, it talks about saving photos to the phone. I don't really have to save however many event photos for how ever many tents all on the phone before displaying, do I?

How would I go about looping over a list of URLs to show in a grid, in a standard system way?

Thanks in advance for the help.

Answer 1

var newsFeed = Titanium.Facebook.requestWithGraphPath('me/feed', {}, 'GET', function(e) {
        if (e.success) {
            var videoObjs = new Array();
            var result = (JSON.parse(e.result)).data;

            for(var c = 0; c < result.length;c++) {
                if(result[c].type == 'video') {
                    var vid = result[c].source.substring((result[c].source.indexOf("/v/"))+3, (result[c].source.indexOf('?')));
                    vidInfo = {
                        vGuid:vid,
                        thumb:"http://img.youtube.com/vi/"+vid+"/0.jpg",
                        descr:result[c].name
                    };
                    videoObjs.push(vidInfo);
                }
            }
            updateTable(videoObjs);
            buildCoverFlow(videoObjs);
            buildDashboard(videoObjs);
        } else if (e.error) {
            alert(e.error);
        } else {
            alert('Unknown response');
        }
    });

var tableData = [];
    var colorSet = [
    "#D44646",
    "#46D463",
    "#46D4BE",
    "#C2D446",
    "#D446D5",
    "#4575D5",
    "#E39127",
    "#879181",
    "#E291D4"
    ];

    var cellWidth = 240;
    var cellHeight = 180;
    var xSpacer = 12;
    var ySpacer = 20;
    var xGrid = 3;
    var yGrid = parseInt(videoObjs.length / 3);
    thumbProps = {
        xSpace : xSpacer,
        cellH : cellHeight,
        cellW : cellWidth
    }
    for (var y=0; y<yGrid; y++) {
        var thisRow = Ti.UI.createTableViewRow({
            className: "grid",
            layout: "horizontal",
            height: cellHeight+(2*ySpacer),
            selectedBackgroundColor:"red",
            backgroundColor:"black"
        });
        for (var x=0; x<xGrid; x++) {
            var index = x + xGrid * y;
            var videoObj = videoObjs[index];
            var thisView = createPlayerThumb(videoObj, thumbProps);
            thisRow.add(thisView);
        }
        tableData.push(thisRow);
    }
    tableview.data = tableData;
    tableview.separatorColor = 'black';
    galWin.add(tableview);

    tableview.addEventListener("click", function(e) {
        if(e.source.objName) {
            Ti.API.info("---> " + e.source.objName+e.source.objIndex + " was clicked!");
        }
    });
}


That's code I wrote for building an array of youtube thumbnails from a given facebook feed for the iPad.  Should be a good start.