Tutorials/en/Nivo-Slider-instead-4-5-CE-Default-Slider

A short tutorial how to use the Nivo-Slider instead of the default slider coming with Community Edition 4.5


 * download Nivoslider at: http://nivo.dev7studios.com/
 * create galleryslider.tpl in folder /out/azure/tpl/widget with following content (maybe you need to replace "azure" with your own template folder name):

[{assign var=oBanners value=$oView-&gt;getBanners }] [{assign var="currency" value=$oView-&gt;getActCurrency}] [{if $oBanners}] &lt;div id="slider"&gt; [{foreach from=$oBanners item=oBanner }] [{assign var=oArticle value=$oBanner-&gt;getBannerArticle }] [{assign var=sBannerLink value=$oBanner-&gt;getBannerLink }] [{if $sBannerLink }] &lt;a href="[{ $sBannerLink }]"&gt; [{/if}] [{*if $oArticle }] &lt;span class="promoBox"&gt; &lt;strong class="promoPrice"&gt;[{ $oArticle-&gt;getFPrice }] [{ $currency-&gt;sign}]&lt;/strong&gt; &lt;strong class="promoTitle"&gt;[{ $oArticle-&gt;oxarticles__oxtitle-&gt;value }]&lt;/strong&gt; &lt;/span&gt; [{/if *}] [{assign var=sBannerPictureUrl value=$oBanner-&gt;getBannerPictureUrl }] [{if $sBannerPictureUrl }] &lt;img src="[{ $sBannerPictureUrl }]" height="360" width="600" alt="[{ $oArticle-&gt;oxarticles__oxtitle-&gt;value }]"&gt; [{/if }] [{if $sBannerLink }] &lt;/a&gt; [{/if}] [{/foreach }] &lt;/div&gt; [{/if }]

$(document).ready(function {   var IE = /*@cc_on!@*/false;    /* init events in content */    var thisParent = thisParent || $("body");    if(IE == false);    initEvents(thisParent);
 * include into base.tpl: [{oxscript include='js/nivoslider.js'}] // be sure to use the correct filename from the package
 * create another file with following content:

});

/* Init basic events and effects */ function initEvents(thisParent) { initNivoSlider; }

function initNivoSlider{ $('#slider').nivoSlider({         effect: 'random',          slices: 15,      boxCols: 12, // For box animations      boxRows: 6, // For box animations                    animSpeed: 1000,          pauseTime: 3800,          startSlide: 0, //Set starting Slide (0 index)          directionNav: false, //Next &amp; Prev          directionNavHide: false, //Only show on hover          controlNav: false, //1,2,3...          controlNavThumbs: false, //Use thumbnails for Control Nav          controlNavThumbsSearch: '.jpg', //Replace this with...          controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src          keyboardNav: false, //Use left &amp; right arrows          pauseOnHover: false, //Stop animation while hovering          manualAdvance: false, //Force manual transitions          captionOpacity: 0.8, //Universal caption opacity          beforeChange: function{},          afterChange: function{}, slideshowEnd: function{} //Triggers after all slides have been shown }); } /* * jQuery Nivo Slider v2.5.1 * http://nivo.dev7studios.com * * Copyright 2011, Gilbert Pellegrom * Free to use and abuse under the MIT license. * http://www.opensource.org/licenses/mit-license.php *  * March 2010 */ /* The Nivo Slider styles */ .nivoSlider {    position:relative; } .nivoSlider img {    position:absolute;    top:0px;    left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink {    position:absolute;    top:0px;    left:0px;    width:100%;    height:100%;    border:0;    padding:0;    margin:0;    z-index:6;    display:none; } /* The slices and boxes in the Slider */ .nivo-slice {    display:block;    position:absolute;    z-index:5;    height:100%; } .nivo-box {    display:block;    position:absolute;    z-index:5; } /* Caption styles */ .nivo-caption {    position:absolute;    left:0px;    bottom:0px;    background:#000;    color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next &amp; Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3...) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; }
 * save this file as initnivo.js and include as well into base.tpl aufrufen (where all the other scripts are included): [{oxscript include='js/initnivo.js'}]
 * add the Nivoslider-CSS to the Oxid-CSS:
 * include following code into the template where you want to show the slider: [{include file="widget/galleryslider.tpl" }]
 * Create promotions as banners in backend and enjoy! :-)

Thanks Chris/coarsy! http://www.oxid-esales.com/forum/member.php?u=8736