Question

I am trying to load multiple images that corresponds to my node when I click my thumbnail.

I am able to get it to load 1 image when clicking but I need to load multiple images. I am

loading my thumbnail images with xml.

var $container = $('.window_body');
var images = new Array();
var id = 0;
init();

function init() {
    $('<div class = "thumbnail_layout layout_type"></div>').appendTo('.window_body');
    $.get('sites.xml', function (d) {
        $(d).find('site').each(function (i, l) {
            var imageUrl = $(this).find('imgurl').text();
            var title = $(this).find('title').text();
            var url = $(this).find('url').text();
            var brief = $(this).find('brief').text();
            var long = $(this).find('long').text();
            var classa = $(this).find('_class').text();
            images[i] = $(this).find('img').text();
            $('<div id="' + "p" + i + '" class="' + classa + '"></div>').html('<a> <img src="' + imageUrl + '" class="thumbnail" />' + '<h1>' + title + '</h1> </a>').appendTo('.thumbnail_layout');
        });
        $(".item").click(function () {
            var index = $(this).prevAll().length;
            var datelength = $(".item").length
            for(var i = 0; i <= datelength; i++) {
                if(i == index) {
                    $("#holder").empty();
                    $("#holder").prepend('<img id="my_img" src="' + images[i] + '" />');
                } else {}
            }
        });
    })
}

XML:

<?xml version="1.0" encoding="iso-8859-1"?>
<sites>
    <site>
        <imgurl>images/thumbnail_big_a.jpg</imgurl>
        <title>test</title>
        <url>http://www.1.com</url>
        <desc>
            <brief>brief description.</brief>
            <long>long description</long>
        </desc>
        <bimgurl>
            <img>images/thumbnail_big_a.jpg</img>
            <img>images/thumbnail_big_b.jpg</img>
            <img>images/thumbnail_big_a.jpg</img>
        </bimgurl>
        <_class>item red</_class>
    </site>
</sites>

Answer 1

You could store the node set you get from $(this).find(‘img’) instead of just the text:

        images[i] = $(this).find('img').text(); 

Then in the click handler do something like:

images[i].each(function() {
    $("#holder").prepend('<img id="my_img" src="' + $(this).text + '" />');  
};