Question

I am trying to create a thumbnail gallery using XML databinding. But the data is not binding. Here is the one which I am trying.

http://jsfiddle.net/5wETg/

Here I want to show all the three images that are in my XML using only one image tag which I used in my HTML.

Answer 1

You can create an <img> tag for each image, I use .map() to create a jQuery object containg all the images and then append them to #thumbs

var xml = "<rss version='2.0'>\
    <channel>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    <image>http://www.nikon.com/swf/img/thumbnail_ophthalmic_lenses.png</image>\
    </channel>\
    </rss>",
xmlDoc = $.parseXML( xml ),
$xml = $( xmlDoc ),
$image= $xml.find( "image" );

$( "#thumbs" ).append( $image.map(function(){
        return $('<img>', {className: 'thumbnails', src:$(this).text()})[0];
    })
);

DEMO

http://api.jquery.com/map/