Galleria & LightBox IE7 & IE8 css issue

I am using version Galleria 1.2, which I know is a bit out of date, and I am having issues with IE7 and IE8. FireFox works correctly. I tried to upgrade to 1.2.2 but ran into other issues which I will have to deal with later due 开发者_如何学JAVAto time constraints.

The problem is that the background of the lightbox opens up black instead of 50% opacity. If I click on the image a second time, the lightbox opens up correctly.

First click:

Second click:

My code:

<script type="text/javascript" src="~/content/js/galleria.js"></script>
<script type="text/javascript">Galleria.loadTheme('~/content/css/Galleria/galleria.classic.js');</script>


$('#imageGallery').galleria({ 
    debug: true,
    width: 300,
    height: 225,
    showInfo: false,
    showCounter: false,
    showImagenav: false,
    data_source: data,
    on_image: function(image, thumb) {
        var gallery = this;
        $(image).click( function() {
            gallery.openLightbox();

            });
            }

}); 

Here's the page request using Fiddler which seems to show the css file being loaded:

If I load the css myself prior to the component loading, I get this:

I am not sure how to fix it.

Thank you!

Try loading the <script type="text/javascript" src="~/content/js/galleria.js"></script> after the CSS is already loaded.

Upgrading to the latest version of Galleria fixed this issue. However, it introduced some new ones. :(