Tutorials/de/Nivo-Slider-anstatt4-5-CE-Default-Slider

Eine kurze Anleitung, wie Ihr den Nivoslider, anstatt dem in der 4.5 eingebauten Standard-Slider in Euren Aktionen (Banner) verwenden könnt.


 * Nivoslider runterladen unter: http://nivo.dev7studios.com/
 * galleryslider.tpl in /out/azure/tpl/widget mit folgendem Inhalt anlegen (ggf. "azure" mit dem Namen des eigenen Templates ersetzen:

[{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);
 * In die base.tpl dann noch bitte folgendes schreiben: [{oxscript include='js/nivoslider.js'}] // Bitte korrekten Dateinamen aus dem Paket verwenden.
 * Eine weitere Javascript Datei mit folgendem Inhalt anlegen:

});

/* 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; }
 * Diese Datei unter dem Namen initnivo.js abspeichern und ebenfalls in der base.tpl aufrufen (bei den ganzen anderen Scripten): [{oxscript include='js/initnivo.js'}]
 * Das Nivoslider CSS dem von Oxid hinzufügen:
 * Dort wo Ihr nun den Slider ausgeben möchtet, das Template entsprechend inkludieren: [{include file="widget/galleryslider.tpl" }]
 * Aktionen als Banner anlegen und genießen :-)

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