Building jQuery Mobile Photo Gallery with Grid System

Question

I am trying to use jQuery Mobile (1.3.1) to display photos in a two-column grid. I am using Ajax to retrieve the photos from my API. How would I make sure that the div's in the grid have the correct classes when they are rendered? Below, I need to rotate the class to ui-block-a and ui-block-b. Thanks in advance!

$.ajax({
    url: server_url + "get-photos", 
    type: "post", 
    data: 'album_id=' + album_id, 
    dataType: 'json', 
    crossDomain: true,  
    error: function() {
        $('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
    },
    success: function(data) {
        if (data.response === "true") {
            $("#album_photos").append('<div class="ui-grid-a">');
            $.each(data, function(i, item) {
                $("#album_photos").append('<div class="ui-block-a"><img src="' + data.photo_url + album_user + '/thumbnail/' + data.album_photo + '" width="75px" /></div>');
            });​
            $("#album_photos").append('</div>');
        } else {
            $('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
        }
    }
});

Answer 1

Just modify the success function to toggle,

success: function(data) {
        if (data.response === "true") {
            $("#album_photos").append('<div class="ui-grid-a">');
            var imgClass = "ui-block-a";
            $.each(data, function(i, item) {
                $("#album_photos").append('<div class="'+imgClass+'"><img src="' + data.photo_url + album_user + '/thumbnail/' + data.album_photo + '" width="75px" /></div>');
            });​
            $("#album_photos").append('</div>');

            if(imgClass == "ui-block-a") {
                      imgClass = "ui-block-b";
            } else {
                      imgClass = "ui-block-a";                
            }
        } 
    }

Answer 2

This is by setting only one side of the spine, "ui-block-a". to have the second column should set also the "ui-block-b" on a div.

I suggest you count the number of umagens returned and divide into two arrays.

with two loops, one on each array, you fill a column "ui-block-a" and the other "ui-block-b"

Or, if you do not want to set two arrays teporarios not use the $. Each, use a simple FOR loop makes first start in half and puts the result in the first column "ui-block-a" and a second loop through the end result that places the second column "ui-block-b"