loupSlider - Simple Slider for jQuery

How to use

Zunächst brauchen wir natürlich jQuery und das PlugIn loupslider.js. Diese Angabe wird im HEAD-Bereich gemacht:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/easing.js"></script> // Optional: Das Easing-Script für alternative Slide-Effekte
<script type="text/javascript" src="js/loupslider.pack.js"></script>

Für den HTML-Code werden alle Bilder inkl. width- und height-Angabe (das ist wichtig für Safari) in einen DIV (hier "slider_front") gepackt:

<div id="slider_front">
<img src="images/P4063893.jpg" alt="P4063893" width="724" height="407" />
<img src="images/P4063910.jpg" alt="P4063910" width="724" height="407" />
<img src="images/P4074281.jpg" alt="P4074281" width="724" height="407" />
</div>

Dann wird dieser mit Bildern befüllte DIV ganz einfach für das PlugIn im HEAD (nach dem Include der Skripte) aktiviert:

<script type="text/javascript">
$(document).ready(function(){
      $('#slider_front').loupslider();
});
</script>

Aktuelle Optionen

• durationTimeOut: Zeit in ms für die das Bild angezeigt bleibt (default: 7000)
• durationBlende: Zeit in ms in der das Bild verschoben wird (default: 1500)
• easing: Easing-Effekt, der angewandt wird
• sliderBottom: Abstand der Bilder im Hintergrund von der unteren Kante des Vordergrundes (default: 30)
• opacity: Transparenz der Bilder im Hintergrund (value: 0 bis 1, default: 0.8)
• navigation: Optionale Navigation einblenden (default: true)
• random: Optional alle Bilder in zufälliger Reihenfolge anzeigen (default: false)

Anpassbare Klassen

• .left_nav, .right_nav: Die Navigationspunkte links und rechts unten am Bild.
• .nav_point: Die Navigationspunkte unterhalb des Sliders (.nav_point.active für den aktuell aktiven Navigationspunkt).
• .cc_loupslider_shadow: Schatten unterhalb des Sliders

Roadmap

• Pause-on-hover

Download

Hier könnt ihr euch das Plugin herunterladen:

Download jQuery-Plugin (loupslider.pack.js - 3KB) Modul für Websitebaker 

Aktuelle Version:

• Plugin: loupslider.js 1.1
• Modul: cc_loupslider 1.0.2

Wichtig für das Modul für Websitebaker: Aktuell funktioniert das Modul nur fehlerfrei, wenn die Seite direkt über den host erreichbar ist (zB. www.creativecat.de). Wer es für eine Testinstallation nutzt muss gegebenfalls in der frontend.js Zeile 12 anpassen und die Unterseite hinzufügen.

Aus

var url = location.host;

wird

var url = location.host+"/testseite";

Lizenz

Das Skript für den Slider stelle ich unter GPL kostenlos zur Verfügung.

Es darf nur für private Zwecke, nicht für kommerzielle Zwecke verwendet werden!
Über einen Link, wo ihr das PlugIn verwendet, würde ich mich natürlich sehr freuen:-)

Changelog

loupslider.js (jQuery-Plugin)

V1.1

• Option für Navigation und zufällige Anordnung der Bilder hinzugefügt
• Skript optimiert, um Navigation zu ermöglichen

V1.0

Initiale Version

cc_loupslider (Websitebaker-Modul)

V1.0.3

• Name für Linktitel hinzugefügt (Bitte Installationsskript noch einmal durchführen!)
• Schatten optimiert, um ihn mittig anzuzeigen
• Skript an IE9 angepasst

V1.0.2

• Schatten im Frontend wird automatisch an die im Backend angegebene Breite angepasst
• backend_body.js optimiert

V1.0.1

• Abfrage nach easing im Frontend ist integriert
• backend.js heißt nun backend_body.js -> läuft nun auch unter WB 2.8.1

V1.0

Initiale Version