Dynamic Slider v1.2

gepostet am 30.05.2013 um 01:05 Uhr

Slider gibts wie Sand am Meer, aber es gibt wirklich wenige die die schöne Funktion haben, dass sie sich an die Größe der Seite oder des Parent Element anpassen können. Dieser Slider ist genau dafür gemacht. Benutzt habe ich ihn z. B. bei dem Projekt sporn.it-hellmann.de. Auf der Seite kann man gut sehen wie sich der Slider anpasst. Auch auf der Startseite von it-hellmann.de läuft der Slider

 

Beispiel:

Dynamisch größenverändernd mit Vorschaubildern und Extend:
sporn.it-hellmann.de

Feste Größe mit persönlich eigenstellter Vorschau:
www.it-hellmann.de

 

Download:

 

Anleitung:

1. Der minimalistische Aufruf:

Was wir mindestens benötigen: Einen HTML Editor, leichte HTML, Javascript und CSS Kenntnisse und ein eingebundenes JQuery (Version egal). Dann kann es los gehen!

Wie immer lädst du die Datei runter und entpackst das zip file in dein gewünschtes Webprojekt. Hier ist nun der Ordner slider vorhanden (kannst du natürlich nennen wie du willst). Um die Funktionalität in deine Seite einzubinden füge im HEAD-Tag folgenden Code ein, der die js Datei einbindet:

Normalerweise bindet das JavaScript die nötige CSS Datei selber ein. Dabei wird aber davon ausgegangen, dass die Seite, die den Slider lädt, im Root Verzeichnis der URL liegt. Sollte dies nicht der Fall sein, Muss man die CSS Datei selbst einbinden:

Das Grundgerüst für den Slider:

Das erste Div darf heißen wie es will. Ich empfehle aber tatsächlich die Klasse “slider” herzunehmen, da dann die mitgelieferten StyleSheets ziehen, die dem Slider die Grundfunktionalität geben. Das Div mit der Klasse “slidercontainer” muss so heißen.

Um den Slider zu starten musst du jetzt noch folgendes Javascript ausführen. Das Script darf aber erst ausgeführt werden wenn alle Elemente des Sliders geladen sind.

In Zeile 2 wird über das DOM-Objekt die Funktion slider aufgerufen. Damit wird der Slider geladen und die gesammte Funktionalität nach Standartparametern gestartet.

ACHTUNG: Zu beachten ist hierbei dass die Bilder den Größen der Default Werte entsprechen müssen, da sonst der Slider nicht richtig funktioniert! Haben die Bilder eine andere Größe, muss diese beim Aufruf mitgegeben werden. Z. B:

Der Grund für diese Einschränkung ist die Berechnung der Dynamik beim Anpassen an die Seitengröße. Die Werte werden nicht benötigt, wenn die Einstellung fitImage auf true gesetzt wird. Ich empfehle aber, diese Werte generell mitzugeben!

So. Das Ganze läuft. Aber ob es so aussieht wie man es will ist die andere Frage…

 

2. Default Werte und eigene Werte übergeben:

Folgende Werte sind als Defaultwerte definiert:

Name Beschreibung Mögliche Werte Default Version
speed Gibt die Geschwindigkeit des Sliders an. (Millisekunden) 0 – ∞ 800 1.0
pause Die Pause zwischen den Slides. (Millisekunden) 0 – ∞ 5000 1.0
width Breite des Containers, der die Bilder beinhaltet. 0 – ∞ (Angabe mit px oder %) ‘512px’ 1.0
height Höhe des Containers, der die Bilder beinhaltet. 0 – ∞ (Angabe mit px oder %) ‘321px’ 1.0
imgWidth Tatsächliche Breite der Bilder.
ACHTUNG!!! Diese Angabe ist wichtig, da sie zum Berechnen des Sliders verwendet wird! Ist das Bild kleiner oder größer als die Standardwerte, muss also definitiv etwas übergeben werden!
0 – ∞ (Angabe mit px) ‘512px’ 1.0
imgHeight Tatsachliche Höhe der Bilder.
ACHTUNG!!! Diese Angabe ist wichtig, da sie zum Berechnen des Sliders verwendet wird! Ist das Bild kleiner oder größer als die Standardwerte, muss also definitiv etwas übergeben werden!
0 – ∞ (Angabe mit px) ‘321px’ 1.0
fitImage Gibt an, ob die Bilder an die Größe des Containers angepasst werden sollen. Wenn fitImage aktiv ist, werden die Angaben in imgWidth und imgHeight ignoriert. true oder false false 1.0
nextButtonId Die ID des HTML-Elements, das zum Vorwärtsblättern benutzt werden soll. String mit der ID ‘cmd-next’ 1.0
previousButtonId Die ID des HTML-Elements, das zum Zurückblättern benutzt werden soll. String mit der ID ‘cmd-prev’ 1.0
extend Die CSS Klasse, die alle Extend Elemente zugewiesen bekommen haben.
ACHTUNG!!! Seit Version 1.2 muss hier kein Punkt mehr Vorangestellt sein, da der übergebene Wert eine CSS Klasse sein muss!
false oder String mit der CSS Klasse false 1.0
1.2
preview Die Klasse oder ID des Elements, in das die Preview geladen werden soll. Genau wie in CSS werden hier Klassen mit einem ‘.’, und IDs mit einem ‘#’ angegeben. false oder String mit der CSS
Klasse oder der ID
false 1.0
previewImgWidth Breite der Elemente in der Preview 0 – ∞ (Angabe mit px) ‘118px’ 1.0
previewImgHeight Höhe der Elemente in der Preview 0 – ∞ (Angabe mit px) ’85px’ 1.0
previewType Art der Preview. ‘img’ lädt kleine Vorschaubilder. Mit ‘own’ kann man über die Parameter previewOwnActiveClass und previewOwnClass eigene Styles übergeben. Somit kann man sich eigene Vorschauelemente schaffen. (Siehe Punkt Vorschau verwenden) ‘img’ oder ‘own’ ‘img’ 1.2
previewOwnActiveClass Die CSS Klasse die das preview Element bekommen soll, welches dem aktiven Bild entspricht. (Wenn im Parameter previewType ‘img’ angegeben wird, wird dieser Parameter ignoriert.) String mi der CSS Klasse ‘slider-dot-active’ 1.2
previewOwnClass Die CSS Klasse die das preview Element bekommen soll, welches nicht dem aktiven Bild entspricht. (Wenn im Parameter previewType ‘img’ angegeben wird, wird dieser Parameter ignoriert.) String mit der Css Klasse ‘slider-dot’ 1.2
previewClickable Gibt an, ob man über die Preview durch einen Klick die Bilder wechseln kann. true oder false true 1.2

 

Möchte man eine dieser Werte selbst übergeben, gibt man dem Scriptaufruf von vorhin einfach die Werte mit. Bei dem oben genannten Beispiel übergebe ich folgende Werte:

Auf die Werte gehe ich nachher noch ein. Für die, die den Aufruf wirklich verstehen wollen, hier eine kurze Erklärung: Ich schaffe mir durch die { … } ein neues Objekt, dessen Properties ich mit NameEigenschaft angebe. Damit überschreibe ich die Standartwerte, die der Slider beinhaltet.

 

3. Extend verwenden:

Manchmal möchte man weitere Informationen “mitsliden” lassen. Man kann diese Funktion z. B. verwenden, um Informationen über das gerade angezeigte Bild anzuzeigen. Man erstellt sich die dementsprechenden Objekte im HTML:

Hier ist zu beachten, dass die Objekte durch eine Klasse eindeutig zu erkennen sein müssen! Welchen Namen diese Klasse hat, ist egal. Jedes Objekt dieser Klasse wird als Extend erkannt. Über die ID gibst du an, zu welchem Bild der Extend gehört. Das bedeutet in diesem Fall, dass das Div mit der ID 1 zum Bild 1 gezeigt wird, zwei zu Bild 2 usw.

Um dem Slider den Extend zu geben überschreiben wir beim Aufruf den “extend” parameter mit der Klasse die wir den Objekten gegeben haben:

Nun werden die Extend Objekte mit ein- und ausgefadet. Auch hier ist wieder darauf zu achten, dass das ausführende Script erst dann ausgeführt wird, wenn alle Elemente des Sliders geladen wurden!

ACHTUNG!!! Seit Version 1.2 wird kein Punkt mehr benötigt. Diese sinnlose Voraussetzung habe ich entfernt, da davon ausgegangen werden kann, dass es sich um eine Klasse handelt.

 

4. Vorschau verwenden:

Der Slider liefert eine Vorschau mit. Um diesen zu benutzen benötigen wir erst einmal einen Container dafür:

Ich kann dem Objekt eine Klasse oder eine ID geben. Beides kann ich verwenden um das Objekt dem Slider zu übergeben:

Den “.” vor preview verwende ich hier um dem Script mitzuteilen dass es sich um ein Objekt der Klasse “preview” handelt. Möchte ich eine ID übergeben mache ich das mit “#prieview” (Eben wie in jQuery oder CSS).

Um die Größe der Vorschaubilder zu ändern kann man die Werte previewImgWidth oder previewImgHeight übergeben.

Standardmäßig wird die Preview als Kleinformat der Bilder initialisiert. Seit Version 1.2 ist es möglich hier auch eigene Previes zu übergeben. Das Attribut previewType kann zwei verschiedene Werte beinhalten: “img” und “own”. Übergibt man “img” (Standard Wert) werden die kleinen Vorschaubilder geladen. Bei Own kann man über die Angabe der beiden Parameter previewOwnClass und previewOwnActiveClass zwei CSS Klassen mitgeben. Dabei steuert previewOwnClass alle nicht aktiven Elemente, und prieviewOwnActiveClass das aktive Element. So kann man z. B. über das Background-image Attribut im CSS eigene kleine Bilder übergeben. Wenn du die standard Werte belässt, werden kleine Punkte umgesetzt. (siehe Startseite)

Seit Version 1.2 ist es möglich zu unterbinden, dass der User über die Preview Bilder wechseln kann. Dazu überschreiben wir den Default Wert von previewClickable einfach mit false.

 

5. Controls mitgeben:

Man kann dem Slider auch Objekte mitgeben, die sozusagen für das Vor- und Zurückblättern “zuständig” sein sollen. Dafür benötige ich sie erst einmal im HTML:

ich übergebe hier die IDs “cmd-prev” und “cmd-next”. Durch die Default-Einstellungen übernimmt der Slider automatisch diese beiden Objekte dafür. Möchte man sie anders nennen, kann man die anderen Werte über die Parameter nextButtonId und previousButtonId übergeben.

 

6. Die wahre Stärke des Sliders:

Übergibt man dem Slider nur Pixelwerte als Breite oder Höhe, ist es ein normaler Slider. Die wahre Stärke des Sliders zeigt sich erst, wenn man dem Slider als Größe Prozente mitgibt und der Slider dann mit dem Fenster wächst und schrumpft. Probier es aus!!!

 

7. Benutzen:

Viel Spaß! 🙂 nicht vergessen Fehler zu melden!!! 🙂

 

FAQ:

Frage: Unter welcher Lizenz wird der Slider angeboten?
Antwort: Der Slider kommt unter der GNU GPL Lizenz.

Frage: Was mache ich, wenn ich den Code des Sliders für mein Projekt anpassen muss?
Antwort: Im Download wird eine kompilierte Version des JavaScripts mitgeliefert. Das mache ich allerdings nicht um den Downloadenden zu nerven, sondern der Performance wegen. Wer den Code anpassen will, der kann von mir auf Anfrage gerne den unkompilierten Code bekommen.

 

Changelog:

Datum Typ Änderung Version
30.05.2013 Change Onlinestellung der Erstversion! erste volle Funktionalität 1.0
18.06.2013 Feature Die Vorschaubilder reagieren auf einen Klick, indem sie das dementsprechende Bild laden 1.1
20.06.2013 Bugfix Bis dato musste man bei der Übergabe einer Klasse für Extend einen Punkt mit ansetzen. Das ist nicht mehr erlaubt. 1.2
20.06.2013 Feature Man kann kann anstatt der Miniaturansicht der Bilder eigene “Previews” übergeben. Über die CSS Klassen die man mitgeben kann, kann man das Aussehen dieser Previews steuern. 1.2
20.06.2013 Feature Man kann unterbinden, dass der User über die Previews die Bilder wechseln kann. (Falls dies jemals gewünscht sein sollte 🙂 ) 1.2

 

Ältere Versionen:


5 Antworten zu “Dynamic Slider v1.2”

  1. der Webmaster! sagt:

    Hei,

    wollte nur ausrichten dass dein Slider wirklich gut ist! Habe ihn kürzlich eingesetzt und muss sagen, leicht zu verstehen und die Funktion der dynamischen Größe läuft perfekt.
    Du könntest in der Dokumentation noch ein wenig besser Beschreiben wie sich die Anzeige aus der angegebenen Größe der Bilder und der Größe des Sliders berechnet. Ich habe da ein paar kleine Fragen gehabt, die ich mir aber hab selber erklären können.

    Sonst wirklich saubere Arbeit! Weiter so!!!

    lg der Webmaster!

  2. kalle die Kralle sagt:

    Gute Arbeit!
    Kann ich den lesbaren Quellcode haben?

Schreibe einen Kommentar zu kalle die Kralle Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.