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().$("fint e").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.