1

大家好，我在 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 中使用。我很乐意尝试实施您可能提出的任何建议并让您知道结果。提前谢谢。

4

2 回答 2

0

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

您在脚本标签中有一个元标签

于 2011-03-24T10:29:37.150 回答
0

它似乎在 IE9 中工作，至少在我的机器上。但是，IE9 确实在第 1 行第 1 列的?live-comment-preview.js（注意问号）上抛出了“语法错误”：

那里有一个指向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 加载您的轮播。

于 2011-03-24T10:00:03.177 回答