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?