Need to load images from server using JSON

Nov 20, 2012 at 6:31 AM

Hi

I need to load images urls and description from server which send response in the form of json can anybody help me in this regard how i can do this.

 

 

Bilal

Feb 27, 2013 at 3:07 PM
Edited Feb 27, 2013 at 3:07 PM
By now you've proberbly found a sollution, but for future reference here's something I whipped up.

It only displays the images, so no description and titles, but with a little imagination you can add those yourself.
function fetch_album() {
    //do an ajax request for album pictures 
    $.ajax({
    url: 'http://yourdomain.com/gallery/json/' ?>',
    type: 'POST', //can also be GET
    data: {
        //whatever data you need to send to the server, markup in javscript object notation
        albumid: 1,
        'some_variable' :'abcdefg'
        'my_array':{
                'foo':'bar',
                'baz':'bat'
            }
    },
    success: function(data) { 
        if (jsonData !== null) {
            add_to_gallery(jsonData, $('#my_target'));
        }  
    },
    dataType: 'json' //what jquery will expect to recieve
    });
}

function add_to_gallery(jsonData,target){
    //target should hold the return of the $('#object') you want to append to
    var msg = $.parseJSON(jsonData);
    var htm='';
    //this part creates the gallery, you can also skip this part and provide the gallery you want to add images to as the target
    htm = '<div class="ad-gallery">'+
            '<div class="ad-image-wrapper"></div>'+
            '<div class="ad-controls"></div>'+
            '<div class="ad-nav"><div class="ad-thumbs">';
    
    //create the thumb-list
    htm += '<ul class="ad-thumb-list">';

    //add images to the above gallery
    for (var I in msg.pics) {
//if you would rather have the images added to an existing gallery skip all the htm stuff and use 
// target.adGallery.addImage(msg.pics[I].thumb, msg.pics[I].imagesrc, msg.pics[I].imgID,msg.pics[I].title , msg.pics[I].description ) 
        htm += "<li><a href='" + msg.pics[I].imagesrc + "'>";
        htm += "<img src='" + msg.pics[I].imagesrc + "' class='image" + I + "'></a></li>";
    }

    //close the thumb list
    htm+="</ul>";
    
    //close the gallery
    htm += "</div></div></div>";

    //add the freshly generated html to the DOM
    target.append(htm);

    //hook in the adGallery to show the fancyness
    $('.ad-gallery').adGallery();
}