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 ではまったく機能していませんでした。この時点では最小限の機能のみで、1 回プレイするとプラグインが壊れます。他の主要なブラウザーでは機能するにもかかわらず、現在 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で動作する可能性があることを知っています。このプラグインを特に選んだ理由の 1 つは、作成者の Web サイトの IE で機能していたことです。喜んで提案を実行し、結果をお知らせします。ありがとうございます。

4

2 に答える 2

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 に答える
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 に答える