Need to load images from server using JSON

Nov 20, 2012 at 6:31 AM


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.




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 
    url: '' ?>',
    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'
    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 {
//if you would rather have the images added to an existing gallery skip all the htm stuff and use 
// target.adGallery.addImage([I].thumb,[I].imagesrc,[I].imgID,[I].title ,[I].description ) 
        htm += "<li><a href='" +[I].imagesrc + "'>";
        htm += "<img src='" +[I].imagesrc + "' class='image" + I + "'></a></li>";

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

    //add the freshly generated html to the DOM

    //hook in the adGallery to show the fancyness