JSLink Royal Slider Tutorial

if you havn't, take a look at the basic tutorial http://bresleveloper.blogspot.co.il/2014/12/js-link-tutorial-sharepoint-2013.html

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;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
};


(function () {
    jsLinkRoyalSlider.Constuctor();
})();
 


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

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>' +
       '</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) {
  $(".royalSlider").royalSlider({
    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
https://onedrive.live.com/redir?resid=949DC4EDBFFD4738!253&authkey=!AFsjHYj0nj8fhfc&ithint=file%2cjs

Comments

Popular posts from this blog

c# Service Play Sound with NAudio example by Moshe

JS/JQ simulate Enter event

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem