配置皇家滑塊在Magento中工作

Question

在過去的幾天裏，我一直在盡我最大努力讓這個slider在Magento中工作。然而，似乎沒有任何工作。

這是它的文檔：http://dev.clickymedia.co.uk/web/documentation.html

所以，我所做的就是將其添加到head.phtml：

<script type="text/javascript"> 
jQuery(document).ready(function($) {   
    $('#banner-rotator').royalSlider({    
      imageAlignCenter:true, 
      hideArrowOnLastSlide:true, 
      slideSpacing:20 
    });   
}); 
</script> 

我加入了各種CSS和JS文件在各自的文件夾並添加該代碼Magento的CMS網頁設計>定製設計>自定義佈局更新XML>

<reference name="head"> 
<action method="addJs"><script>jquery/jquery-1.6.2.min.js</script></action> 
<action method="addJs"><script>jquery/jquery.easing.1.3.min.js</script></action> 
<action method="addJs"><script>jquery/royal-slider-8.1.min.js</script></action> 
<action method="addCss"><script>css/royalslider.css</script></action> 
<action method="addCss"><script>css/royalslider-skins/default/default.css</script 
</action> 
</reference> 

最後，在網頁CMS，頁面內容，我加了個是：

<div id="banner-rotator" class="royalSlider default"> 
<ul class="royalSlidesContainer"> 
<li class="royalSlide"> <img class="royalImage" src="{{media url="wysiwyg/slider/banner1.png"}}" alt="banner1" width="1150" height="400" /> 
<div class="royalCaption" style="left: 58%; text-align: center; color: #33383e; width: 315px; top: 110px;"> 
<div class="royalCaptionItem" style="width: 100%;">Animated Blocks</div> 
<div class="royalCaptionItem sgMidText" style="top: 35px; width: 100%;">with Custom Effects for Each Item</div> 
<div class="royalCaptionItem sgSmallText " style="top: 70px; left: 96px;"><a class="tintButton non-draggable" href="[removed]void()">Button Example</a></div> 
</div> 
</li> 
<li class="royalSlide"> <img class="royalImage" src="{{media url="wysiwyg/slider/banner2.png"}}" alt="banner2" width="1150" height="400" /> 
<div class="royalCaption" style="left: 57%; top: 65px; color: #b93;"> 
<div class="royalCaptionItem" style="width: 280px;">Drag Navigation</div> 
<div class="royalCaptionItem sgMidText" style="left: 120px; top: 35px; width: 200px;">with Mobile Support</div> 
</div> 
</li> 
<li class="royalSlide"> <img class="royalImage" src="{{media url="wysiwyg/slider/banner3.png"}}" alt="banner3" width="1150" height="400" /> 
<div class="royalCaption" style="left: 40%; top: 130px; width: 300px; color: #eaeaed;"> 
<div class="royalCaptionItem " style="left: -320px;">Autoplay Slideshow</div> 
<div class="royalCaptionItem sgMidText" style="left: -200px; top: 30px;">with Pause on Hover</div> 
</div> 
</li> 
<li class="royalSlide"> <img class="royalImage" src="{{media url="wysiwyg/slider/banner4.png"}}" alt="banner4" width="1150" height="400" /> 
<div class="royalCaption" style="left: 40%; top: 120px; width: 400px; color: #4e4c39; text-align: center;"> 
<div class="royalCaptionItem " style="left: -320px; width: 100%;">Smart Lazy-Loading</div> 
<div class="royalCaptionItem sgMidText" style="left: -320px; top: 35px; width: 100%;">Preloads Nearby Images After Current</div> 
</div> 
</li> 
</ul> 
</div> 

雖然滑塊被說成是一個簡單的小的JavaScript插件，我在這一個新手，在增加的Magento沒有成功。請，如果你有這個解決方案，請幫忙！

Answer 1

這看起來像我，就好像你有jQuery和原型之間的衝突。

看看magento using jquery with noconflict的接受答案，我想你應該檢查你是否需要做同樣的事情。

Answer 2

錯誤可能在您的更新xml部分。試試這個：

<reference name="head"> 
<action method="addItem"><type>skin_js</type><name>jquery/jquery-1.6.2.min.js</name></action> 
<action method="addItem"><type>skin_js</type><name>jquery/jquery.easing.1.3.min.js</name></action> 
<action method="addItem"><type>skin_js</type><name>jquery/royal-slider-8.1.min.js</name></action> 
<action method="addItem"><type>skin_css</type><name>css/royalslider.css</name><params/><if><![CDATA[<!--[]><!-->]]></if></action> 
<action method="addItem"><type>skin_css</type><name>css/royalslider-skins/default/default.css</name><params/><if><![CDATA[<!--[]><!-->]]></if></action> 
</reference>