Coverflow error "offsetWidth" happens with less then 8 images. #45
Description
I'll keep posted here.
Scenario: Use coverflow with less then 8 images result in this error. How can we bypass it ?
jquery-coverflow.js:278 Uncaught TypeError: Cannot read property 'offsetWidth' of undefined
at t.(anonymous function).(anonymous function)._frame (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:278:83)
at t.(anonymous function).(anonymous function)._frame (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
at t.(anonymous function).(anonymous function)._setIndex (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:235:10)
at t.(anonymous function).(anonymous function)._setIndex (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
at t.(anonymous function).(anonymous function)._create (file:///C:/DEV/WIP/HTML5/Components/coverflow-master-reflection/scripts/jquery-coverflow.js:194:9)
at t.(anonymous function).(anonymous function)._create (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4499)
at t.(anonymous function).(anonymous function)._createWidget (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:6645)
at new t.(anonymous function).(anonymous function) (https://code.jquery.com/ui/1.12.1/jquery-ui.min.js:6:4063)
at HTMLDivElement.<anonymous> (jquery-ui.min.js:6)
at Function.each (jquery-2.2.4.min.js:2)
For rendering server images atm we can use a loadScript to start coverflow at right time. Looking for ways to bypass that too.
for (let index = 0; index < data.length; index++) {
$('#preview-coverflow').append("<img class='cover' src='" + data[index] + "' />");
if (data.length - 1 === index) {
loadScript("scripts/jquery-coverflow.js", createCoverflow);
}
}
/**
* Simple node.js style script loader for modern browsers
**/
function loadScript(src, cb) {
var script = document.createElement('script');
script.async = true;
script.src = src;
script.onerror = function () {
cb(new Error("Failed to load" + src));
};
script.onload = function () {
cb();
};
document.getElementsByTagName("head")[0].appendChild(script);
}