Question

嘿伙计们，我在BigCartel.com上经营一家商店。最近我决定在我的商店中加入一个jQuery滑块。我选择了这个而不是闪存，以便它可以与我的客户的Apple移动设备兼容。不幸的是，我遇到了一些让它在IE中运行的问题。此时它在Chrome，FF和Safari中完美运行，这是我担心的其他主流浏览器。我想我可以在这里找到一些有效的帮助，而不是将我的头撞在墙上继续试图解决这个问题。

您可以在www.StarboardClothing.com看到我的网站。我使用的滑块名为“Infinite Carousel”，可在Catch My Fame上找到。

以下是我目前正在使用的代码：

在我的布局页面的部分中，它应用于网站上的所有其他页面，我有以下代码。

{% 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 %}

然后，我在我实际实现插件的部分中包含以下代码。这使得它在IE中具有一定的功能。在添加该包装之前，它根本不在IE中运行。此时它只是最小功能，插件在播放后会崩溃。尽管在其他主流浏览器中功能正常，但IE中的控件当前都不起作用。

<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>

如果有人能帮助我在IE中工作，我将非常感激。我知道可以在IE中工作。我特别选择这个插件的部分原因是它在创建者网站上的IE中起作用。我很乐意尝试实施您可能提出的任何建议，并让您了解结果。提前谢谢。

Answer 1

它似乎适用于IE9，至少在我的机器上。但是，IE9会在?live-comment-preview.js的第1行第1行引发“语法错误”（请注意问号）：

http://www.catchmyfame.com/?live-comment-preview.js中有一个链接可能真正指向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>

我无法再访问早于IE9的IE版本，因此无法帮助您解决这些问题 - 可能是这种语法错误会阻止旧的IE加载您的转盘。

Answer 2

我测试了IE6,7,8上的链接。滑块工作正常但它们都在第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>

脚本标记

中有元标记

Infinite Carousel无法在IE中正确加载，适用于Chrome，Safari和FF

2 个答案: