Question

How to refill the image src with the value from imageArray[0]?

$.getJSON("http://xxxx",function(data) {
    var imageArray=[];
    imageArray=data.images;
    alert(imageArray[0]);
    $('#loader').empty();
    var imageOne= '<img style="display:none;" src="imageArray[0]" id="1" wdith="100" />';
    $("#ajax_content").html(imageOne);
    $('img#1').fadeIn();
});

I want to refill the imageArray[0] as below

var imageOne= '<img style="display:none;" src="http://i2.cdn.turner.com/cnn/dam/assets/120824111207-storm-isaac-t1-main.jpg" id="1" wdith="100" />';

@thanks undefined

I want to have all of them in an array and show only the first image. Later i will work on having previous/next button to move on to next image. Can you currect the following to work?

for (var i=0;i<imageArray.length;i++){
                        imageOne[i]='<img style="display:none;" src="'+imageArray[i]+'" id="i" wdith="100" />;';
                    }
                    $("#ajax_content").html(imageOne);
                    $('img#1').fadeIn();

Answer 1

$.getJSON("http://xxxx", function(data){
    var imageArray=[];
    imageArray = data.images;
    $('#loader').empty();
    for (var i = 0; i < imageArray.length; i++) {
        var img = '<img style="display:none;" src="'+imageArray[i]+'" id=img"'+i+'" wdith="100" />';        
        $("#ajax_content").append(img);
        $('#img'+i).fadeIn();
    }
});

Update:

var img = [];
for (var i = 0; i < imageArray.length; i++) {
    img[i] = '<img style="display:none;" src="'+imageArray[i]+'" id="'+(i+1)+'" width="100"/>';
}
$("#ajax_content").html(img[0]);
$('img#1').fadeIn();

Note that if the doctype of your page is not HTML5, IDs must begin with a letter and also note that there is a typo in your string literal wdith should be width.