JSON content - can't display image after click

Question

Hi to all,
I am trying to to load a JSON file and load images with text information.
I have a problem when i click the thumbnail, the large image can't displayed, i am receiving the following error:
Failed to load resource: the server responded with a status of 404 (Not Found)
my code in compositionReady:
$.getJSON("content.json",
          function(data){
                    for(var i=0; i<=data.length; i++){
                    var s = sym.createChildSymbol("template","content");
                    s.$("title").html(data[i].title);
                    s.$("description").html(data[i].description);
                    s.$("seira").html(data[i].seira);
                    s.$("imageholder").css({"background-image":"url('"+data[i].image+"')"});
                    s.$("imageholder").click("click", function(e){
                                                            sym.getComposition().getStage().$("finte").css({"background -image":"url("+$(this).data('largeimage')+")"});
And the JSON File:
                    "title": "Titlos 1",
                    "description":"Descrpt 1",
                    "seira": "Number 1",
                    "image": "images/wheel.png",
                    "largeimage": "images/1.png"
                    "title": "Titlos 2",
                    "description":"Inter description 2",
                    "seira": "test",
                    "image": "images/wheel_cool.png",
                    "largeimage": "images/wheel_cool.png"
I tried also with this code:
$.getJSON("content.json")
   .success(
          function(data){
                    console.log("incoming data: ", data);
$.each(data, function(index, item){
          var s = sym.createChildSymbol("template","content");
          s.$("title").html(item.title);
          s.$("description").html(item.description);
          s.$("seira").html(item.seira);
          s.$("imageholder").attr("src",(item.image));
                    s.play();
          s.setVariable( "largeimage", item.largeimage)
and at the element that hold's the thumbnail image, I added on the click event :
sym.$("finte").css({"background-image":"url("+$(this).data('largeimage')+")"});
I believe that somewhere on +$(this).data('largeimage')+") is the mistake. But I can't find it.
Your help is needed.
Moreover, how, the thumbnails, can be displayed as a table of 4x5?
Thanks in advanced.

Answer 1

Hi Zoze
you missed some lines, try this, i think this should work for you
$.getJSON("content.json",
          function(data){
                    for(var i=0; i<=data.length; i++){
                    var s = sym.createChildSymbol("template","content");
                    s.$("title").html(data[i].title);
                    s.$("description").html(data[i].description);
                    s.$("seira").html(data[i].seira);
                    s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')"});
                    s.$("imageholder").data('Large', data[i].largeimage);
                    s.$("imageholder").click("click", function(e){
                                                            sym.getComposition().getStage().$("fint e").css({"background-image":"url("+$(this).data('Large')+")"});
if you had problem again, let me know
Zaxist