Wednesday, December 17, 2014

JSLink Royal Slider Tutorial

if you havn't, take a look at the basic tutorial

the basic thing about royal slider is the wrapper
<div id="Slider" class="royalSlider rsDefault">

therefor the most logical solution is to use the Header-Item-Footer architecture.
and since I like to capsulate everything I do so here is my basic object

var jsLinkRoyalSlider = {};

jsLinkRoyalSlider.HeaderOverrideFun = function (ctx) {
    return '<div id="Slider" class="royalSlider rsDefault">';

jsLinkRoyalSlider.ItemOverrideFun = function (ctx) {

jsLinkRoyalSlider.FooterOverrideFun = function (ctx) {
    return '</div>';

jsLinkRoyalSlider.Constuctor = function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Header = jsLinkRoyalSlider.HeaderOverrideFun;
    overrideCtx.Templates.Item = jsLinkRoyalSlider.ItemOverrideFun;
    overrideCtx.Templates.Footer = jsLinkRoyalSlider.FooterOverrideFun;

(function () {

now for the item, each should look like this

<div class="rsContent">
    <a class="rsImg" data-rsBigImg="pictureURL" href="pictureURL"></a>
    <div class="infoBlock blockBottomline">
        <!-- content -->

so lets fill the ItemOverrideFun function
var pictureURL = ctx.CurrentItem.FileRef;
var title = ctx.CurrentItem.Title;
var desc = ctx.CurrentItem.Description;
return '<div class="rsContent">' +
            '<a class="rsImg" data-rsBigImg=" ' + pictureURL + ' " href="' + pictureURL + '" ></a>' +
            '<div class="infoBlock blockBottomline">' +
                 '<div class="TitelBlock">' + title + ' </div>' +
            '</div>' +

function all that's left is to initiate the royal slider, I would use jQuery but there still isn't jQuery yet here, do I used the native "ready" function (not supported in IE8, there either load JQ, or use onload) in my anonymous constructor function

document.addEventListener("DOMContentLoaded", function (event) {
    arrowsNav: false,
    controlNavigation: 'bullets',
    imageScaleMode: 'none',
    imageAlignCenter: false,
    loop: true,
    transitionType: 'fade',
    autoPlay: {
     stopAtAction: false,
      enabled: true,
      delay: 5000

now, for some reason, and I blame the JSLink here, there was a script element between my item, so I used the OnPostRender function to remove it

overrideCtx.OnPostRender = jsLinkRoyalSlider.PostRenderHandler;

jsLinkRoyalSlider.PostRenderHandler = function (ctx) {
   $("script", "#Slider").remove();

and here is my final script from my onedrive!253&authkey=!AFsjHYj0nj8fhfc&ithint=file%2cjs

No comments:

Post a Comment