2011-03-24 76 views
1

嘿,我在BigCartel.com上經營一家商店。最近我決定將jQuery滑塊組合到我的商店中。我選擇了這個而不是閃光燈,以便它能夠與我的客戶的Apple移動設備兼容。不幸的是,我遇到了一些讓它在IE中工作的問題。在這一點上,它完美適用於Chrome,FF和Safari,我擔心的其他主流瀏覽器。我想我可能能夠在這裏找到一些有效的幫助,而不是把我的頭撞到牆上繼續試圖弄清楚這一點。無限傳送帶無法在IE中正常加載,適用於Chrome,Safari和FF

你可以看到我的網站www.StarboardClothing.com。我使用的滑塊名爲「無限旋轉木馬」,可在此處獲得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中起作用。我很樂意嘗試實施您可能提供的任何建議,並讓您知道結果。提前致謝。

回答

0

它似乎在IE9中工作,至少在我的機器上。 IE9確實,但是,拋出一個「語法錯誤」上線1 ?live-comment-preview.js 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加載您的卡羅素。

+1

嘗試IETester中的meta標籤;) – 2011-03-24 10:22:18

+0

@克里斯:謝謝你的指針,將就一下吧。 – Martijn 2011-03-24 10:31:17

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> 

你必須在腳本標籤

相關問題