John John - 3 months ago 41
JSON Question

JQuery Image slider load pictures from json

I am using a JQuery plugin tiksluscarousel. It works fines for static html code. which is shown in .

<div id="fruits">
<ul>
<li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits1.jpg" /></li>
<li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits2.jpg" /></li>
<li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits3.jpg" /></li>
<li><img src="http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits4.jpg" /></li>
</ul>
</div>
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {

jQuery(document).ready(function(){
$("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1});
});
});


Then i want to load images from a JSON. Then the slider effects gone. which is

<div id="fruits1"></div>
var data = {"data": [{
"name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
"imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits3.jpg"
},
{
"name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
"imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits2.jpg"
},
{
"name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
"imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits1.jpg"
},
{
"name": "Nike air foamposite \"hyper colbalt/ben gordan\" pre order 8/26",
"imagepath": "http://tikslus.com/web/bundles/tikslustikslus/examples/carousel/fruits4.jpg"
}
]}
var node = document.getElementById("fruits1")
for (var i in data.data) {
var newItem = document.createElement("li");
var img = document.createElement("img");
img.src = data.data[i].imagepath;
newItem.appendChild(img);
node.appendChild(newItem);
}

$('.page-content-area').ace_ajax('loadScripts', scripts, function() {

jQuery(document).ready(function(){

$("#fruits1").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1});
});
});


I can not find the reason why the effect gone.
Please help me.

Answer

var node = document.getElementById("fruits1") will return the div not the ul. you have to append the li to the ul child of div.

try

var node = document.getElementById("fruits1").child[0];

instead of var node = document.getElementById("fruits1")

hope this helps.

Comments