Montag bis Freitag 09:00 - 15:00 Uhr
Forum
 
02.02.2012, 19:14

Schöner jQuery nivo-slider für Startseiten oder Banner im Shop

Sehr geehrte Kunden,

habe vorhin einen sehr schönen jQuery-slider namens "nivo" entdeckt, und möchte kurz zeigen, wie man diesen in wenigen Schritten im POWERGAP Shop einbindet. Lässt sich z.B. wunderbar als Effekt auf der Startseite präsentieren. Aber auch der Einsatz als Banner für Suchergebnisseiten wäre mit dem entsprechenden Aufwand möglich.

Hier ein Live-Beispiel :



Wer sich nicht selbst traut und auch die dafür notwendigen hochwertigen Banner von uns gestalten lassen möchte, möge sich bitte einfach bei uns melden.

Die Einrichtung:
(wie immer bei solchen jQuery Sachen sollte man gute HTML und CSS-Kenntnisse mitbringen)

Zunächst muss im Feld "Javascript_Head" bei Sonstiges > Sonstige Einstellungen dieser Code eingebunden werden:

<script language="javascript" type="text/javascript" src="x_jquery-1.7.1.min.js"></script>


Achtung! Evtl. ist dieser schon eingebunden oder es muss eine ältere Version wie z.B. x_jquery.min.js durch die neuere x_jquery-1.7.1.min.js ersetzt werden, um das ans Laufen zu bekommen.

Über Layout > Schriften CSS > All (ROOT) bitte folgendes CSS einbinden:

/* 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;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 & 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;}
.theme-default .nivoSlider {position:relative;background:#fff url(https://cdn.powergap.de/pg_loading.gif) no-repeat 50% 50%;margin-bottom:50px;-}
/* wer dem ganzen Fenster einen Schatten verpassen möchte muss in der Klasse .theme-default .nivoSlider diese Werte anfügen: -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;box-shadow: 0px 1px 5px 0px #4a4a4a;*/
/* Nivo-Sonstiges */
.theme-default .nivoSlider img {position:absolute;top:0px;left:0px;display:none;}
.theme-default .nivoSlider a {border:0;display:block;}
.theme-default .nivo-controlNav {position:absolute;left:50%;bottom:-42px;margin-left:-40px;}
.theme-default .nivo-controlNav a {display:block;width:22px;height:22px;background:url(https://cdn.powergap.de/pg_bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;}
.theme-default .nivo-controlNav a.active {background-position:0 -22px;}
.theme-default .nivo-directionNav a {display:block;width:30px;height:30px;background:url(https://cdn.powergap.de/pg_arrows.png) no-repeat;text-indent:-9999px;border:0;}
.theme-default a.nivo-nextNav {background-position:-30px 0;right:15px;}
.theme-default a.nivo-prevNav {left:15px;}
.theme-default .nivo-caption {font-family: Helvetica, Arial, sans-serif;}
.theme-default .nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.theme-default .nivo-caption a:hover {color:#fff;}


Wer diesen Slider nun auf der Startseite einbinden möchte, platziert wie gewohnt über Layout > Startseite > Infogruppen einen Infotyp "Grafik/Text.." und fügt im Feld "Text1" folgenden Code ein:

<br><br><br>
<script type="text/javascript" src="x_jquery.nivo.slider.pack.js"></script>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider">
<a href="schoene-Schuhe.html"><img src="img/st3.jpg" alt="" title="Schuhe sammeln ist toll.."></a>
<a href="schoene-Schuhe.html"><img src="img/st2.jpg" alt="" data-transition="slideInLeft"></a>
<a href="schoene-Schuhe.html"><img src="img/st4.jpg" alt="" title="Praga ist dieses Jahr einfach nur cool!"></a>
</div>
</div>
<script type="text/javascript">
var jq=$;
if(jQuery){jq=jQuery;}
jq(window).load(function() {
    jq('#slider').nivoSlider({
       effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
       slices: 15, // For slice animations
       boxCols: 8, // For box animations
       boxRows: 4, // For box animations
       animSpeed: 900, // Slide transition speed
       pauseTime: 5000, // How long each slide will show
       startSlide: 0, // Set starting Slide (0 index)
       directionNav: true, // Next & Prev navigation
       directionNavHide: true, // Only show on hover
       controlNav: true, // 1,2,3... navigation
       controlNavThumbs: false, // Use thumbnails for Control Nav
       controlNavThumbsFromRel: false, // Use image rel for thumbs
       controlNavThumbsSearch: '.jpg', // Replace this with...
       controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
       keyboardNav: true, // Use left & right arrows
       pauseOnHover: true, // Stop animation while hovering
       manualAdvance: false, // Force manual transitions
       captionOpacity: 0.8, // Universal caption opacity
       prevText: 'Prev', // Prev directionNav text
       nextText: 'Next', // Next directionNav text
       randomStart: false, // Start on a random slide
       beforeChange: function(){}, // Triggers before a slide transition
       afterChange: function(){}, // Triggers after a slide transition
       slideshowEnd: function(){}, // Triggers after all slides have been shown
       lastSlide: function(){}, // Triggers when last slide is shown
       afterLoad: function(){} // Triggers when slider has loaded
   });
});
</script>
<br><br><br>


Die Kommentare die mit // hinter den Einstellungsmöglichkeiten stehen, sollte man zum Schluss entfernen. Und wenn man bei den <img... die Option title=".." wegläßt wird unter dem Bild auch kein Untertitel angezeigt. So etwas sollte man aus SEO-Sicht aber immer nutzen.

Anstatt "effect: 'random'" (also per Zufall) kann man auch folgende Effekte gezielt wählen:

   - sliceDown
   - sliceDownLeft
   - sliceUp
   - sliceUpLeft
   - sliceUpDown
   - sliceUpDownLeft
   - fold
   - fade
   - slideInRight
   - slideInLeft
   - boxRandom
   - boxRain
   - boxRainReverse
   - boxRainGrow
   - boxRainGrowReverse

Diese Beschreibung hier ist kurz und knackig. Wer aber mit CSS gut umgehen kann, wird schnell herausfinden, wie man recht einfach z.B. die Blättern-Buttons ändert, oder Positionen verschiebt.

Weitere Infos zu den Einstellungen können JS/CSS-Profis auf nivo.dev7studios.com/support/advanced-tutorials/ bekommen.