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:
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:
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:
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.
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;}
.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>
<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.