vanderlee/coverflow

Weird display issue on init

Closed this issue · 4 comments

Very strange issue. Sometimes, only the currently selected index cover will be shown after I init. Once I hover over it and move the mouse wheel, everything is fine, and the other covers appear. Doesn't happen all the time, maybe about half the time.

Any ideas? Thanks - and awesome plugin, btw!

Never seen this before.
My first guess would be that it's initialized before the DOM is ready.

Does it happen on all browsers/OS?
Do you have any JSFiddle or similar example?

Well, that seems to be the problem, though I'm not really sure why it is doing it, since I was calling coverflow in doc ready. I ended up working around it a different way, but I'm pretty sure it is because stuff wasn't fully loaded. I'll play around with it some more when I have some time. Thanks!

Just for future reference, the problem I am having is that I am loading the cover images via an AJAX call, and then doing the coverflow call. Since the images haven't fully loaded in the browser, it causes the coverflow to sort of "stack up". FWIW. Gotta figure out a way to load the image list via AJAX, and then wait until they are all loaded before calling coverflow.

For additional reference, here is what I ended up doing to make sure the dynamic images from the AJAX call were fully loaded before calling coverflow:

        var loaded = 0;

        $('#test-container img').on('load', function()
        {
          loaded++;

          if (loaded == $('#test-container div img').length)
          {

            // I have the container hidden at first, so it all pops on the page at once
            $('#test-container').css("visibility", "visible");

            $('#test-container').coverflow({
              index: Math.floor(($('#test-container').find("img").length / 2)),
            });
          }
        });

You can put this in the success/done callback of the AJAX call, etc.