Couple of things I noticed.
First, you don't need to use "$(function () {" as that forces multiple unnecessary function calls.
Second, why ".imagecube2("? I couldn't find anywhere where the documentation for imagecube uses that. You should be able to use ".imagecube(" on all of them or even in one single call.
Third, according to the documentation (
http://keith-wood.name/imageCubeRef.html) imagePath is "Any extra path information required to locate the highlight and shadow images used by IE for the shading effects." I would presume that "images/" points to the folder where the highlight and shadow images can be found, otherwise it shouldn't be needed.
And last, it is quite possible that in IE the page hadn't completely loaded yet. If it were me I would use something like the following:
Code: Select all
<script type="text/javascript">
$(document).ready(function(){
$('.imageCube').imagecube({imagePath: 'images/'});
});
</script>
Code: Select all
<div id="imageCube1" class="imageCube" style="width: 150px; height: 150px;">
<img src="images/1.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/1b.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/a.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/1.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/1b.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/1c.jpg" alt="#" width="120" height="120"title="#"/>
</div>
<div id="imageCube2" class="imageCube" style="width: 150px; height: 150px;">
<img src="images/2.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/2b.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/2.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/2b.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/b.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/2.jpg" alt="#" width="120" height="120" title="#"/>
</div>
<div id="imageCube3" class="imageCube" style="width: 150px; height: 150px;">
<img src="images/c.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/4.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/4b.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/4.jpg" alt="#" width="120" height="120" title="#"/>
<img src="images/4b.jpg" alt="#" width="120" height="120"title="#"/>
<img src="images/4.jpg" alt="#" width="120" height="120" title="#"/>
</div>
Notice how I used the class selector to select all of the "imageCube" divs in a single call.