search

vanderlee / coverflow

Yet another jQuery Coverflow widget. Support for mousehweel, touch, reflections and complex CSS animation. Events for pretty much everything. Controllable using various methods. Options to change pretty much everything, but works fine without any options.
http://vanderlee.github.io/coverflow/
101 stars 39 forks source link

Coverflow error "offsetWidth" happens with less then 8 images. #45

Open stephyswe opened 5 years ago

stephyswe commented 5 years ago

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);
}
vanderlee commented 5 years ago

Which version of jquery and jquery-ui are you using?

Op vr 1 mrt. 2019 10:28 schreef Stephanie notifications@github.com:

i tried acuple times to add coverflow but i get an error every time i try with async data.

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. (jquery-ui.min.js:6) at Function.each (jquery-2.2.4.min.js:2)

Any idea what is happening? I even try loading the script directly after adding the images.

for (let index = 0; index < data.length; index++) { $('#preview-coverflow').append("");

        if (data.length - 1 === index) {
            loadScript("scripts/jquery-coverflow.js", createCoverflow);
        }
    }

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/vanderlee/coverflow/issues/45, or mute the thread https://github.com/notifications/unsubscribe-auth/AAnoGDGApq_wquSqJgmfuGqf_fd_fZOzks5vSPK-gaJpZM4bYm6S .