Page 1 of 1

jQuery and Internet Explorer - Image Cube

Posted: Tue Aug 16, 2011 5:35 am
by vogue
Hi guys,

Any advice would be appreciated on this.

I've adapted Keith Woods Image Cube plug in which works perfectly on all browsers (http://keith-wood.name/imageCube.html).

However - I wanted to attempt to replicate the image cube several times on one page so that it would look like a rubix cube - here's my example (http://voguelondon.vogue-media.co.uk/).

All I did was change the id as shown below so that the images would not conflict:

Code: Select all

<script type="text/javascript">
$(function () {
	$('#1Cube').imagecube({imagePath: 'images/'});
});
</script>

<script type="text/javascript">
$(function () {
	$('#2Cube').imagecube2({imagePath: 'images/'});
});
</script>
This works perfectly on Firefox and Safari but on Internet Explorer 7/8 the image crashes on the first rotation and doesn't move.

Am I missing something blatently obvious here? I'm not great at coding but I don't think I've missed out on anything too obvious?

I've even tried replicated the js files and renaming them imagecube2/3/4 etc but to no avail.

Any help would be greatly appreciated.

V.

Re: jQuery and Internet Explorer - Image Cube

Posted: Sat Sep 10, 2011 9:13 am
by KCAstroTech
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.