Der Name des Plugins ist etwas sperrig geraten: „ThresholdingImageCrossfader“. Aber dafür beschreibt er ganz gut was das Plugin macht.
Mit Hilfe des Plugins könnt ihr eine beliebige Anzahl an Bildern mit dem Thresholding-Effekt ineinander überblenden lassen. Es handelt sich also um eine kleine Bildergalerie wenn man es genau nimmt. Die Überblendung der Bilder findet in der Regel automatisch statt. Es sei denn der User möchte das nicht.
Per Parameter könnt ihr festlegen welche und wie viel Bilder in der Bildergalerie angezeigt werden sollen. Ihr könnt auch bestimmen wie lange ein Bild angezeigt wird bevor das nächste erscheint und wie schnell der Effekt beim überblenden abläuft. Zusätzlich könnt ihr die Richtung bestimmen mit der der Effekt abläuft. Natürlich könnt ihr die Größe per width und height festlegen und auch die Richtung in der die Bilder angezeigt werden kann eingestellt werden.
Ein kleines Tutorial wie man das Plugin mit oder auch ohne jQuery nutzen kann und welche Features es gibt folgt weiter unten. Auch den Link zum Download der gepackten (2KB) „jquery.thresholdingimagecrossfader.min.zip“ findet ihr am Ende dieses Posts.
Die hier zum veranschaulichen eingesetzten Bilder stammen übrigens von der sehr schönen Seite „New Old Stock“.
Und so geht´s.
Hier ein ganz simples Beispiel wie ihr das Plugin einsetzen könnt.
Zunächst einmal müsst ihr, wenn ihr mit jQuery arbeiten wollt die Imports haben:
Den folgenden Code packt ihr einfach in ein Script Tag rein:
$( document ).ready( function() {
var settings = {
images: [ './img/Img001.jpg', './img/Img002.jpg', './img/Img003.jpg' ],
width: 480,
height: 480
};
$( '#holder' ).thresholdingImageCrossfader( settings );
} );
Damit hab ihr schon eure erste kleine Bildergalerie erstellt. Wie ihr sehen könnt braucht es dazu nur noch ein Div. Ich hab meinem die id id='holder' gegeben, aber da seid ihr natürlich völlig frei.
Ihr könnt euch auch einfach bei diesem Beispiel den Quellcode anschauen, dann bekommt ihr einen Eindruck was zu tun ist.
Wie gesagt. Das Ganze funktioniert auch komplett ohne jQuery. Hier das Beispiel von oben ohne jQuery:
document.addEventListener( 'DOMContentLoaded', function( event ) {
var settings = {
images: [ './img/Img001.jpg', './img/Img002.jpg', './img/Img003.jpg' ],
width: 480,
height: 480
};
var thresholdingImageCrossfader = new ThresholdingImageCrossfader( document.getElementById( 'holder' ), settings );
} );
Das ist die minimale Startkonfiguration mit der ihr loslegen könnt. Kommen wir nun zu den zusätzlichen Parametern die ihr mit Hilfe der „settings“ noch einstellen könnt. Folgend ein Beispiel mit allen möglichen Parameter und der dazugehörigen Erklärung:
var settings = {
images: [ './img/Img001.jpg', './img/Img002.jpg', './img/Img003.jpg' ],
width: 480,
height: 480,
delay: 3,
step: 3,
dir: 1,
effectDir: 1,
bgColor: '#000000',
auto: true
};
$( '#holder' ).thresholdingImageCrossfader( settings );
Die ersten drei Parameter sind ja schon bekannt. Einmal das „images“ Array mit dem ihr angeben müsst welche Bilder geladen und angezeigt werden sollen. Gefolgt von „width“ und „height“ um die Breite und Höhe zu bestimmen.Mit „delay“ legt ihr fest für wieviel Sekunden ein Bild zu sehen sein soll, bevor das nächste erscheint.
Per „step“ bestimmt ihr wie schnell der Effekt der Überblendung stattfinden soll. Erlaubt sind hier Werte von 1 - 255. Wobei eigentlich nur Werte zwischen 1 -10 wirklich Sinn machen. 1 ist dabei besonders langsam und folgerichtig 10 sehr schnell. Da ein Pixel nur einen Farbwert von 0 - 255 haben kann, ergibt sich daraus das Limit für diesen Parameter von 1 - 255. Würde mann an dieser Stelle 0 angeben, dann würde einfach gar nichts passieren.
Der Parameter „dir“ bestimmt in welcher Richtung die Bilder aus dem Array angezeigt werden sollen. Erlaubt sind hier die beiden Werte 1 und -1. Beim Wert 1 wird das Array von vorne bis zum Schluss abgearbeitet und bei -1 umgekehrt.
Mit „effectDir“ gebt ihr an in welcher Richtung der Effekt beim überblenden ablaufen soll. Auch hier sind die Werte 1 und -1 erlaubt. Bei einem Wert von 1 wird von 255 auf 0 heruntergeganen und bei einem Wert von -1 von 0 auf 255 hochgezählt. Beides sieht eigentlich sehr schick aus. Es kommt auch ein bisschen auf die Bilder an die ihr einsetzt was hier besser geeignet ist. Sind die Bilder sehr hell, oder sehr dunkel? Probiert es einfach mal aus.
Und mit „bgColor“ legt ihr einfach nur die Hintergrundfarbe fest die angezeigt wird bevor das erste Bild vollständig eingeblendet worden ist.
Der Parameter „auto“ nimmt true oder false entgegen. Standardmäßig ist true eingestellt, was bedeutet, dass die Bilder automatisch hintereinander in einer unendlichen Dauerschleife angezeigt werden. Steht der Parameter auf false wird nur das erste, oder letzte Bild eingeblendet und nichts weiter passiert.
Zusätzlich dazu könnt ihr das Ganze auch steuern. Hier zwei Beispiele wie ihr per Klick zum nächsten, bzw. zum vorherigen Bild springen könnt:
$( '#holder' ).css( 'cursor', 'pointer' ).click( function() {
$( '#holder' ).thresholdingImageCrossfader( { nextImage: null } );
} );
$( '#holder' ).css( 'cursor', 'pointer' ).click( function() {
$( '#holder' ).thresholdingImageCrossfader( { previousImage: null } );
} );
Und hier nochmal das Gleiche vereinfacht ohne Click und ohne jQuery:
thresholdingImageCrossfader.nextImage();
thresholdingImageCrossfader.previousImage();
Das ist erst mein zweites jQuery Plugin. Es kann also gut sein das noch nicht alles optimal ist. Speziell der Aufruf der beiden Methoden „nextImage“ und „previousImage“ mit jQuery gefällt mir noch nicht wirklich. Wenn also jemand Verbesserungsvorschläge hat immer gerne her damit.
So. Und hier nun wie versprochen der Download Link zu der minifizierten JavaScript Datei.
Und hier gibt es zusätzlich auch noch die nicht minifizierte Version.
Unterstützte Browser: Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+
Bzw. alle Browser die mit dem Canvas Element umgehen können.
1 Kommentar:
Hey I have featured your cool plugin at Technoplugin
Kommentar veröffentlichen