Question

I am currently using jquery, and jstree plugin to show images. I am building tree based on an xml file that has nodes. Saparately, I am creating images using some third party tool. Image names are -model.png. When a node is picked, depending on the node_id on the tree, I display images on divs.

It works, but the problem is not all nodes have the same number of images. For example node_a would have 10 images, node_b would have 2 images etc. Rather than manually creating the divs and based on the image, hide or show; I would like to display images dynamically. If node_A is clicked on the tree, I should be able to see all the images in 2 column format on the right side using jquery.

My current code is this:

    <div id="column_2">
        <div id="2_div1" ></div>
        <div id="2_div2" "></div>
        <div id="2_div3" ></div>
    </div>

left is my div to build the jstree

$("#left").jstree("toggle_node", data.rslt.obj);

var node_id = data.rslt.obj.attr("id");

node_id is unique id that all images have. based on the car make. For example, it would be GM-Make, Ford-Make, Toyota-Make etc

  if (node_id.indexOf("Make")>=0)
    {
      var Img_year_2012 = "node_id+"-year_2012.png";
       $(function () { 
         $('#1_div1').html("").css({"border": "", "margin": "0"});
        var myImage1 = new Image(); 
        $(myImage1).load(function () 
        {  

        $("#1_div1").html(myImage1).css({"border":"2px solid #E0E0E0", "margin": "20px 20px 20px 0"});
         $( '#1_div1 img' ).css({ "width": "600px", "height" : "650px" });


        })         
        .attr('src', Img_year_2012).error(function(){
            $('#1_div1').html("").css({"border": "", "margin": "0"});
            })

        });

Rather than doing it like this, How can I just display every image belong to a node id?

Answer 1

Maybe I am misunderstanding the question, but have you tried using a for loop iterating through each node? Some thing like: http://www.w3schools.com/dom/dom_nodes_traverse.asp