Configuring Royal Slider to work in Magento

Question

For the past few days I've been trying my best to get this slider to work in Magento. However nothing seem to be working.

This is the documentation for it: http://dev.clickymedia.co.uk/web/documentation.html

So, what I did was add this to the head.phtml:

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

I then added the various css and js files in their respective folders and added this code to Magento's homepage 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>

lastly, in the homepage CMS, page content, I added this:

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

Although the slider is said to be a simple little JavaScript plugin, I am a newbie at this and have no success in adding to Magento. Please, if you have a solution for this, do help!

Answer 1

This looks to me as though you are having a conflict between jQuery and prototype.

Have a look at the accepted answer for magento using jquery with noconflict , I think you should check whether you need to do the same.

Answer 2

The fault may be in your update xml part. Try this instead:

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