Shadowbox not working in IE

Question

I have a bit of a problem with my shadowbox, it works fine in FF, but it refuses to work in IE 7 or 8.

I am using these scripts,

<script type="text/javascript" src="scripts/jquery-1.4.2.js"</script>
<link rel="stylesheet" type="text/css" href="scripts/shadowbox/shadowbox.css">
<script type="text/javascript" src="scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

and I am also using this jQuery to assign the rel attribute to all the a tags inside of my calendar, and it works fine in FF, but not at all in IE.

$(function() {
   $('#wp-calendar').find('a').each( function() {
       $(this).attr( 'rel', 'shadowbox[Mixed];width=520;height=390');
   });
});

but for some reason it just refuses to work in any IE.

I really am at the end of my rope here, any help would be appreciated, thanx!

Answer 1

You are calling Shadowbox.init(); immediately when page is loading, but adding rel parameters only on jquery dom:ready state.

Shadowbox can pick up only links that already had the rel=... parameter when init() method was executed.

In some browsers apparently first happens dom:ready event, and then scripts in <script> are executed, but not in IE. You should move Shadowbox.init() inside jquery $(function ... after assigning rel attribute:

$(function() {
   $('#wp-calendar').find('a').each( function() {
       $(this).attr( 'rel', 'shadowbox[Mixed];width=520;height=390');
   });
   Shadowbox.init();
});