SLIDO jQuery Plugin
Modified:
Speziell bei Grafik-Teasern steht man manchmal vor der Aufgabe, neben der zum Klick animierenden Fläche zusätzliche Informationen unter zu kriegen. Klar kann man diese Informationen direkt in der Grafik einbauen und Gefahr laufen die Fläche zu überladen, man kann aber auch einen kleinen Effekt mit Javascript einarbeiten, welche die Interaktion mit dem Benutzer nochmals steigert und nur sichtbar ist, wenn der Besucher mit der Mouse auf den Teaser zeigt.
Genau zu diesem Zweck habe ich das jQuery-Plugin SLIDO entwickelt, welches folgende Features beinhaltet
- Einbindung einfach als jQuery-Plugin
- Verwendung von HTML innerhalb des Sliders
- Überladen des Slider-CSS
- Verwendung von Callback-Funktionen
- Minimaler Fingerprint ( gepackt 1.8 KB )
Das Ganze kann dann Beispielsweise so aussehen:
Für eine erfolgreiche Einbindung reichen bereits folgende Minimalsettings.
var settings = {
// sämtliche Settings haben Defaultwerte, die verwendet werden können. Speziell bei "content" macht es aber Sinn, diesen zu ändern
content : '<h3>SLIDO</h3>Inhalt des Sliders. HTML ist ausdrücklich erlaubt.'
}
Für maximale Flexibilität sind folgenden erweiterte Settings möglich.
var settings = {
// Initialhöhe des Sliders (das ist der Zipfel der am unteren Rand hervorsteht)
initHeight : 30,
// Hintergrundfarbe
bgColor : 'white',
// Textfarbe
color : '#999',
// Cursortyp (z.B. crosshair, default, text, etc...)
cursor : 'default',
// Transparenzwert, wenn der Slider hochgefahren ist
opacityTop : .8,
// Transparenz, wenn der Slider in der Ausgangsstellung ruht
opacityBottom : 1,
// Beschleunigungsprofil beim hochfahren(swing, linear oder weitere unter Zuhilfenahme von Drittplugins)
easingUp : 'swing',
// Beschleunigungsprofil beim runterfahren (swing, linear oder weitere unter Zuhilfenahme von Drittplugins)
easingDown : 'linear',
// Zeit (ms) die der Slider zum hochfahren braucht
durationUp : 'fast', // slow, fast, normal, microseconds
// Zeit (ms) die der Slider zum runterfahren braucht
durationDown : 'normal', // slow, fast, normal, microseconds
// Inhalt des Sliders (HTML erlaubt)
content : jQuery('#my_content').html(),
// zusätzliche CSS-Klassen, die dem Slider zugeordnet werden sollen
sliderClasses : 'slider_class',
// zusätzliche CSS-Klassen, die dem Wrapper zugeordnet werden sollen
wrapperClasses : 'wrapper_class',
// zusätzliches Inline-CSS für den Slider
cssSlider : {
'border' : '2px solid #999',
'padding' : '5px'
},
// zusätzliches Inline-CSS für den Wrapper
cssWrapper : {
'width' : 'auto',
'margin-bottom' : '10px'
},
// zusätzliche Attribute für den Wrapper
attrWrapper : {
'title' : 'Das ist der Wrapper'
},
// zusätzliche Attribute für den Slider
attrSlider : {
'title' : 'SLIDO - jQuery Sliding Overlay'
},
// Zeit, die der Slider im hochgefahrenen Zustand verharren soll
delay : 300,
// JS-Methode, die nach erfolgtem Hochfahren aufgerufen werden soll
callbackUpSlide : function(){jQuery('#message').css('color', 'green').html('SlideUp complete')},
// JS-Methode, die nach erfolgtem Runterfahren aufgerufen werden soll
callbackDownSlide : function(){jQuery('#message').css('color', 'red').html('SlideDown complete')}
};
Das SLIDO-Plugin wird, wie bei jQuery üblich einfach auf beliebige Selektoren angewendet und folgendermaßen eingebunden.
// Das Plugin rufen wir auf, wenn das Dokument komplett geladen wurde
jQuery(function() {
jQuery('#example').slido(settings);
});
Hier gehts zur Projektseite auf jquery.com: http://plugins.jquery.com/project/slido
Fragen zur Einbindung und Verbesserungsvorschläge beantworte ich gerne in den Kommentaren.
Viel Spaß mit diesem kleinen jQuery-Plugin!
