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:
$(document).ready(function()
{
var IE = /*@cc_on!@*/false;
/* init events in content */
var thisParent = thisParent || $("body");
if(IE == false);
initEvents(thisParent);
});
/* 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 & 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 & 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
});
}
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:
/*
* 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 & 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;
}
Dort wo Ihr nun den Slider ausgeben möchtet, das Template entsprechend inkludieren:
[{include file=“widget/galleryslider.tpl” }]
[QUOTE=g4k;56153]gutes Tutorial! Danke!!
aber mal ne Frage für nen Doofen… wieso soll ich den Nivoslider nehmen, habe nicht wirklich einen Unterschied bemerken können.
Gruß,
Alex[/QUOTE]
Der nivo-Slider verwendet [B]15 Transitionseffekte[/B] statt nur den einen des Standard-Sliders.
wirklich vielen Dank für die Mühe, leider bin ich auf dem Gebiet noch nicht so versiert und wollte deshalb eben noch etwas fragen:
(1) Erstellung dieser Daten erfolgt über Text-Dokument -> speichern unter… -> *.js?
(2) Wo genau muss [{oxscript include=‘js/nivoslider.js’}] und [{oxscript include=‘js/initnivo.js’}] in der base.tpl eingefügt werden? Egal wo?
Bitte korrekten Dateinamen aus dem Paket verwenden.
Wie ist der Dateiname dann, wenn ich auf der Originalseite das Paket runtergeladen habe?
jquery.nivo.slider.js?
(3)
Dort wo Ihr nun den Slider ausgeben möchtet, das Template entsprechend inkludieren:
[{include file=“widget/galleryslider.tpl” }]
Das bedeutet, möchte ich auf der Startseite den Slider integrieren, so muss ich es auf die start.tpl schreiben. Wo allerdings genau hin, es soll den Standard-Banner ersetzen?
(1) Erstellung dieser Daten erfolgt über Text-Dokument -> speichern unter… -> *.js?
Richtig, hier bitte PSPad verwenden, ist einer der besten Editoren und obendrein noch Freeware.
(2) Wo genau muss [{oxscript include=‘js/nivoslider.js’}] und [{oxscript include=‘js/initnivo.js’}] in der base.tpl eingefügt werden? Egal wo?
Nein, nicht egal wo, am besten im Header oder im Footer, da wo schon die anderen JS Bibliotheken importiert werden, idealerweise nach dem JQuery Import.
Wie ist der Dateiname dann, wenn ich auf der Originalseite das Paket runtergeladen habe?
Hier die gepackte Version verwenden (jquery.nivo.slider.pack.js). Der Einfachheit halber habe ich das Script
umbenannt.
(3)
Das bedeutet, möchte ich auf der Startseite den Slider integrieren, so muss ich es auf die start.tpl schreiben. Wo allerdings genau hin, es soll den Standard-Banner ersetzen?
Kann ich Dir gerade nicht aus dem Stegreif sagen, suche doch mal nach promoslider.tpl, denn dieser wird ja durch Dein neues galleryslider.tpl ersetzt. Alternativ kannst Du auch den angepassten promoslider verwenden. Sprich, Du kopierst den Template Code von oben in das promoslider.tpl.
Erst mal danke an coarsy für den tollen Slider, leider habe ich jedoch einen sehr unschönen Effekt. Beim Neuladen der Seite werden erstmal alle Banner einzeln untereinander dargestellt, erst wenn die Seite vollständig geladen ist, wird der Slider vernünftig angezeigt, macht sich vorallem bei langsamen Leitungen bemerkbar.
das CSS stimmt dann noch nicht, da bin ich mir zu fast 100 % sicher. Also lad Dir den NivoSlider nochmal runter und nehm das CSS von dort oder direkt vom CSS aus meinem Shop.
danke für deine schnelle Reaktion, zuerst einmal ja es liegt am css! Mit dem NivoSlider css, hab ich das Problem, mit deinem nicht, allerdings ist dein css angepasst für deine Seite, ich habe die orig. Größe von width: 940px und height: 220px und kann beim besten willen nicht erkennen wie ich das auf meine Seite anpassen könnte (css Buch mit 7 Siegeln). Kannst du mir sagen wo genau ich die Änderungen vornehmen kann.
Was mich noch interessiert der untere Slider von dir, den hätte ich auch gerne im Austausch zu den Markenslider, woher bekommt man den?
Ansonsten wäre es natürlich hilfreich, wenn man sich Deinen Shop bereits live ansehen könnte.
Der untere Slider ist eine Mischung aus scrollTo.js und noch ner anderen Bibliothek. Werde diesen aber demnächst weiterentwickeln und einen Endlosscroller draus machen. Eventuell stelle ich diesen dann hier rein…
das hatte ich bereits gestern getan, so ganz untätig war ich ja nicht ;), allerdings hatte ich die hälfte vom css vergessen, und zwar alles nach (Other Styles), daran lag es offensichtlich, wie auch immer jetzt klappt es, danke dir nochmal!
Die Banner können erst ab der 4.5.0 er angelegt werden. Du kannst aber die Bilder auch komplett in einer CMS Seite hinterlegen und im Slider Div einfach ausgeben. Tut auch, hatte ich vorher bei mir so eingebaut.
wenn ich dies richtig verstehe, funktioniert der slider nicht im header?
und zusätzliche Texteinblendungen sind nicht machbar, bzw. müsste in der grafik selbst sein?
Mein Vorhaben ist, dass ich hammer-Aktionen auf diese weise etwas “reisserischer” darstellen möchte…
ich bin nicht sehr versiert mit programmieren, habe mein shop bereits x-fach abgeschossen bei ganz simplen Modulen.
Bin um jede Hilfe unendlich dankbar!
Hallo, ich habe da noch so meine Probleme beim einbau des Sliders…
Ich habe soweit die Anleitung befolgt.
Welche Dateien muß ich aus dem runtergeladenem Nivo Slider Paket wohin hochladen?
Da giebt es ja noch die Template und Demo ordner die img Dateien usw. bin da etwas ratlos!
Angezeigt werden bei mir jetzt zwei Banner übereinander was wohl an den fehlenden Dateien liegt?
Gruß Patrick
So jetzt läuft der Slider ich habe festgestellt das man keine Sortierung in den Bannern anlegen darf!
ich versuche gerade zu lernen, möchte einen anderen slider einbauen, es geht wahrscheinlich in etwa wie beim Einbau des nivo slider nehme ich an, oder?
gerne wüsste ich wofür die folgenden Zeilen gebraucht werden?
