Hello,
I am trying to dynamically populate a cube ad with photos and text from a json file. The fields that are populated are photo, title, desc and price. When I initially created the ad I had a photo and 3 text fields. After a 5 second animation, the count would increase by 1 and all fields would be repopulated. When I tested this the text worked perfectly but there was a lag in the photo switch. My solution was to create a second set of fields to run the following way:
Slide A (visible): Photo, Title, Desc, Price
Slide B (hidden): populated with the next Photo, Title Desc, Price
5 second animation, then switch
Slide B (Visible)
Slide A (hidden) repopulated with the next Photo, Title, Desc, Price
5 second animation, then switch
Loop back to the top...
This set-up works through the first run through but then the photo starts lagging again.
Can anyone help me solve the lag issue? Below is my compositionReady stage code. I will also include a zip of my project. I moved Slide B 300px to the right and took out the hide functions so I could see what was happening behind the scenes. I also included some helper text fields to show what functions are being called while it is running.
compositionReady Code:
//Variable
imageCount = 0;
//JSON
$.getJSON("slides.json", function(data){
loadDataA(imageCount);
// Load Data A
function loadDataA(i) {
sym.$("notification1").html("loadDataA");
sym.$("photo").empty();
sym.$("photo").attr("src", data[i].image);
// Populate text A
sym.$("title").html(data[i].title);
sym.$("desc").html(data[i].desc);
sym.$("price").html(data[i].price);
sym.$("notification5").html("photo image = " + data[i].image);
}
// Load Data B
function loadDataB(i) {
sym.$("notification1").html("loadDataB");
sym.$("photo2").empty();
sym.$("photo2").attr("src", data[i].image);
// Populate text A
sym.$("title2").html(data[i].title);
sym.$("desc2").html(data[i].desc);
sym.$("price2").html(data[i].price);
sym.$("notification6").html("photo2 image = " + data[i].image);
}
function hideAshowB() {
sym.$("notification2").html("hideAshowB");
sym.$("photo").empty();
//sym.$("photo").hide();
//sym.$("title").hide();
//sym.$("desc").hide();
//sym.$("price").hide();
sym.$("photo2").show();
sym.$("title2").show();
sym.$("desc2").show();
sym.$("price2").show();
}
function hideBshowA() {
sym.$("notification2").html("hideBshowA");
sym.$("photo2").empty();
//sym.$("photo2").hide();
//sym.$("title2").hide();
//sym.$("desc2").hide();
//sym.$("price2").hide();
sym.$("photo").show();
sym.$("title").show();
sym.$("desc").show();
sym.$("price").show();
}
function animateSlideshowA() {
sym.$("notification3").html("animateSlideshowA");
sym.$("title").animate({x: 9}, 5000, function() {
sym.$("notification4").html("insideSlideshowALoop");
imageCount++;
if (imageCount >= data.length) {
imageCount = 0;
}
loadDataA(imageCount);
hideAshowB();
animateSlideshowB();
});
}
function animateSlideshowB() {
sym.$("notification3").html("animateSlideshowB");
sym.$("title2").animate({x: 309}, 5000, function() {
sym.$("notification4").html("insideSlideshowBLoop");
imageCount++;
if (imageCount >= data.length) {
imageCount = 0;
}
loadDataB(imageCount);
hideBshowA();
animateSlideshowA();
});
}
loadDataA(imageCount);
imageCount++;
loadDataB(imageCount);
animateSlideshowA();
});
www.capitalpress.biz/html5ads/cubes/nyssatractor/NyssaDynamicTest.zip
Thanks for your help,
Brandon