i am stuck in passing data from php to kineticjs throught json below is the code
$arrParams = array('images' =>$images, 'captions' => $content);
init({"container":"slider","data":<?php echo json_encode($arrParams); ?>});
i want to pass the above Json array in my below given coded kineticjs code
var data;
var canvasWidth;
var canvasHeight;
var stage;
var layer = new Kinetic.Layer();
var imageNodes = [];
var imageObjects = [];
var imageBox = [];
var captionBox = [];
var textNodes = [];
var totalObjects = 0;
var objectLoaded = 0;
var currentSlide = false;
var defaultPosition = [];
var rightCardPosition = [];
var leftCardPosition = [];
function init(config) {
canvasWidth = config.width | 600;
canvasHeight = config.height | 300;
defaultPosition["x"] = canvasWidth / 4;
defaultPosition["y"] = canvasHeight + 5;
leftCardPosition["start"] = [];
leftCardPosition["end"] = [];
leftCardPosition["start"]["x"] = (canvasWidth / 3) - 180;
leftCardPosition["start"]["y"] = canvasHeight - 260;
leftCardPosition["end"]["x"] = (canvasWidth + 100);
leftCardPosition["end"]["y"] = -250;
rightCardPosition["start"] = [];
rightCardPosition["end"] = [];
rightCardPosition["start"]["x"] = (canvasWidth / 3) + 160;
rightCardPosition["start"]["y"] = canvasHeight - 300;
rightCardPosition["end"]["x"] = (canvasWidth + 100);
rightCardPosition["end"]["y"] = -250;
stage = new Kinetic.Stage({
container: config.container,
width: canvasWidth,
height: canvasHeight
});
totalObjects = data.images.length;
for (var i = 0; i < data.images.length; i++) {
totalObjects += data.captions[i].length;
}
for (var i = 0; i < data.images.length; i++) {
loadImage(data.images[i]);
loadCaption(data.captions[i]);
}
}
I am getting error like in the line
totalObjects = data.images.length;
data is undefine... which means images is not pass from the json array
You're encoding the JSON with PHP, now you just need to parse it with JavaScript and store it in your data
variable.
data = JSON.parse(config.data);
Put this at the start of your init
function and it should work for you.