配置 Royal Slider 以在 Magento 中工作答案

【问题标题】：Configuring Royal Slider to work in Magento配置 Royal Slider 以在 Magento 中工作
【发布时间】：2012-04-28 09:38:02
【问题描述】：

在过去的几天里，我一直在尽我最大的努力让这个 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，design>custom design>Custom Layout Update 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。请，如果您对此有解决方案，请提供帮助！

【问题讨论】：

你的javascript控制台有错误吗？
是的。 Uncaught TypeError: Object [object Object] has no method 'attachEvent' observeprototype.js:5653 Validation.initializevalidation.js:98 klassprototype.js:101 VarienForm.initializeform.js:35 klassprototype.js:101 和 (anonymous function)beta:314 prototype.js:5734Uncaught TypeError: Object [object Object] has no method 'dispatchEvent' fireprototype.js:5734 _methodizedprototype.js:438 fireContentLoadedEvent

标签： javascript jquery magento slider

【解决方案1】：

在我看来，您在 jQuery 和原型之间存在冲突。

查看magento using jquery with noconflict 的接受答案，我认为您应该检查是否需要这样做。

【讨论】：

终于让它工作了！意识到它与我在页面上的另一个脚本冲突。谢谢你的回复:)
可能有点晚了，但我刚刚注意到，也许你可以将@CCBlackburn 他的回答标记为已接受：p

【解决方案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>

【讨论】：