Infinite Carousel无法在IE中正确加载，可以在Chrome，Safari和FF中使用

Question

Hey guys, I run a store on BigCartel.com. Recently I decided to incorporate a jQuery slider onto my store. I chose this rather than flash so that it would be compatible with Apple mobile devices for my customers. Unfortunately, I've run into some issues getting it to work in IE. At this point it works perfectly in Chrome, FF, and Safari, the other major browsers I'm worried about. I figured I might be able to track down some effective help here, rather than banging my head against the wall continuing to try to figure this out.

You can see my website at www.StarboardClothing.com . The slider I am using is named "Infinite Carousel" and is available here on Catch My Fame .

Here is the code that I'm currently using:

In the section of my layout page, which is applied to all other pages on the site I have the following code.

---

{% if page.permalink == 'home' %}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://sliderfiles.starboardclothing.com/jquery.infinitecarousel2.min.js"></script>

<script type="text/javascript">
  $.noConflict();
</script>

<script type="text/javascript"> 
jQuery(function(){
jQuery('#carousel').infiniteCarousel({
    transitionSpeed: 2000,
    displayTime: 6000,
    inView:1,
    advance:1,
    imagePath: 'http://sliderfiles.starboardclothing.com/',
    textholderHeight : .25,
    padding:'10px',
    autoHideCaptions: true,
    prevNextInternal: true,
    displayThumbnailNumbers: false,
    displayThumbnailBackground: false,
    thumbnailWidth: '10px',
    thumbnailHeight: '10px',
    autoHideControls: true,
    displayProgressBar: false,
    easeLeft: 'swing',
    easeRight: 'swing'

});
jQuery('div.thumb').parent().css({'margin':'0 auto','width':'60px'});
jQuery('#carouselWrapper > div:eq(1)').css('margin-top','56px');
jQuery('#carouselWrapper > div:eq(2)').css('margin-top','56px');
});
</script>

{% endif %}

---

I then include the following code on my site in the section where I am actually implementing the plugin. The is what has allowed it to be somewhat functional in IE. Prior to adding that wrapper, it was not functioning in IE at all. At this point it is only minimal function, and the plugin breaks down after one play through. None of the controls currently work in IE despite being functional in the other major browsers.

---

<div class ="iframe-wrapper">

<div id="carousel">
<ul>
<li><a href="http://www.starboardclothing.com"><img alt="" src="http://sliderfiles.starboardclothing.com/annapolis-splash3.jpg" width="648" height="302" /></li>        
<li><a href="http://www.starboardclothing.com/artist/spring-line-2011"><img alt="" src="http://sliderfiles.starboardclothing.com/spring-line.jpg" width="648" height="302" /></li>

</ul>
</div>
</div>

---

If anyone could help me get this working in IE, I'd be extremely grateful. I know it's possible to get working in IE. Part of the reason why I picked this plugin in particular is that it was functional in IE on the creator's website. I'll be happy to try to implement any suggestions you may have and let you know the results. Thanks ahead of time.

Answer 1

It seems to work in IE9, at least on my machine. IE9 does, however, throw a 'Syntax Error' on line 1, column 1 of ?live-comment-preview.js (note the question mark):

There's a link in there to http://www.catchmyfame.com/?live-comment-preview.js which should probably really point to http://www.catchmyfame.com/live-comment-preview.js :

<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="48264cb9eb" /></p><script src="http://www.catchmyfame.com/?live-comment-preview.js" type="text/javascript"></script><div id="commentPreview"></div>

I no longer have access to IE versions older than IE9, so can't help you with those — it could be that this syntax error prevents older IEs from loading your carrousel.

Answer 2

I tested the link on IE6,7,8. The slider works fine but they all throw an error on line 17:

<script type="text/javascript">

    <meta name="generator" content="Big Cartel" />
<script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-22000995-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>

You have a meta tag inside the script tag