views:

171

answers:

2

I'm building a page where I want to use Galleria script (http://devkick.com/lab/galleria/) and jQuery's Accordion widget to hide away different categories of gallery's thumbnails. In my initialization I wrote as suggested by both scripts' manuals:

<script type="text/javascript">
        jQuery(function($) { 
        $('ul.gallery').galleria({
         insert: "#image"
        });

         $("#thumbs").accordion();

        });
</script>

The galleria() function creates thumbnails and assigns proper sizes to them. Then, the accordion() function assigns its styles and collapses the currently invisible elements. With the code above I have a problem with some thumbnail images becoming invisible due to having zero dimensions.

If I put alerts before the thumbnails are assigned their sizes in galleria() function, I can see that for images that are inside accordion's invisible pages, their container has zero dimensions at that point. That is very strange to me because I thought that these functions execute consecutively and accordion() is not called before galleria() has finished.

What's more strange, if I put an alert before the accordion function, then everything is processed in correct order.

It's obvious that I'm facing a race condition here. Why does it happen and what should I do to guarantee an orderly initialization sequence?

+2  A: 

This is just a guess, but I'm guessing it has something to do with the scripts running before the images are downloaded. This would seem to explain why the alert() before the accordion function makes things work. It gives the images a chance to load.

If this is right, you would want to use jQuery's load() event handler to ensure that the images are fully loaded.

Docs for load(): http://api.jquery.com/load-event/

patrick dw
That's it! Shame on me, could've guessed myself. The thumbnail sizes are set not in galleria() initializer, but in load() event handler for image object. I missed it while I was examining galleria's sources. Thanks!
Corvin
+1  A: 

I would imagine that the race condition might be in the fact that all the images might not be downloaded yet once galleria has added them. That would cause the accordian function to assume the images are zero by zero.

The reason adding an alert works is because it takes and by the time you close it, the images have downloaded.

If you want to be sure of the execution order, look into firebug and console.log instead of using alerts, which don't block script execution like alert does.

Regarding your main issue, I'd look into seeing if galleria provides some callback functionality to ensure all the images are downloaded before moving on.

Mike Sherov
Yes, that was the case, thanks. I'll have to patch galleria's code to compute thumbs size from css and not from surrounding DOM. Thanks a lot for the Firebug tip! I didn't know about console.log. Is there a way to print file, line and time no this log, like __LINE__, __FILE__ etc macros in C++?
Corvin
http://getfirebug.com/logging shows you what firebug can do. Also, welcome to stackoverflow!
Mike Sherov