mSlider Fallback

free jQuery-Plugin

Autor:
Andreas Wulf (mediafant)
Aktuelle Version:
3.2 - 12.10.2012
Lizenz:
MIT/GPL

Der mSlider läßt sich schnell und einfach in die eigene Seite einbinden. Die Konfiguration des mSliders erfolgt mit einer externen XML oder JSON-Datei. So bleibt der Code auf Ihrer Website schlank und übersichtlich. Der Code des Plugins steht unter der MIT/GPL-Lizenz zur freien Verfügung.
Die Konfigurationsmöglichkeiten des mSliders sind sehr vielseitig, daher hier nur eine kleine erste Übersicht:

  • mehrere Buttons pro Slide möglich und frei positionierbar
  • Navigation des Sliders mit Seitenzahlen, Text oder Thumbnails
  • Größe des mSliders ist beliebig änderbar
  • Runde Ecken per Attribut-Definition "true" bzw. "false"
  • Konfigurationsdatei ist Crossdomain-kompatibel
  • Unterstützung Econda-Tracking
  • u.a.m.

 

minimaleinbindung

Bitte aktivieren Sie Javascript um den mSlider zu sehen.

Konfigurationsdatei erstellen

Zunächst wird eine Konfigurationsdatei erstellt. In dieser Konfigurationsdatei wird definiert, welche Bilder im Slider angezeigt werden sollen, die Größe des Sliders und viele andere Dinge mehr (siehe Konfiguration). Im Minimalfall müssen die Pfade zu den Sliderbildern definiert werden. Die Bilder legen Sie entsprechend Ihrer Pfadangabe bereit.

Das Standardformat dieser Konfigurationsdatei ist das JSON-Format. Wenn Sie das Plugin jquery.xml2json.js einbinden, können Sie die Konfiguration auch über eine XML-Datei durchführen. Es gibt auch ein nützliches Online-Tool mit dem Sie JSON in XML und umgekehrt wandeln können: http://jsontoxml.utilities-online.info/

<?xml version="1.0" encoding="utf-8"?> 
<slider> 
    <slides> 
        <img>img/slide_1/slide.jpg</img> 
    </slides> 
    <slides> 
        <img>img/slide_2/slide.jpg</img> 
    </slides> 
    <slides> 
        <img>img/slide_3/slide.jpg</img> 
    </slides> 
</slider>

    "slides": [{ 
        "img": "img/slide_1/slide.jpg" 
    },{ 
        "img": "img/slide_2/slide.jpg" 
    },{ 
        "img": "img/slide_3/slide.jpg" 
    }] 
}

Wichtiger Hinweis: Sie können die Konfigurationsdatei nur dann als XML-Datei bereitstellen, wenn Sie das Plugin jquery.xml2json.js in Ihre HTML-Datei einbinden.

Einbinden der CSS und JS-Dateien

Binden Sie im Header Ihrer HTML-Seite jQuery, das mSlider-Plugin und die mSlider-CSS-Dateien ein.

Wenn Sie die Konfiguration des Sliders statt in einer JSON im XML-Datei bereitstellen möchten, müssen Sie zusätzlich das Plugin jquery.xml2json.js herunterladen und einbinden (im Code auskommentiert).

HTML-Header
<link rel="stylesheet" href="css/mSlider.3.css" type="text/css" media="screen"/>
    <!--[if IE]>
        <link rel="stylesheet" href="css/mSlider.3.ie.css" type="text/css" media="screen"/>
    <![endif]-->
    
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- <script type="text/javascript" src="js/jquery.xml2json.js"></script> -->
    <script type="text/javascript" src="js/jquery.mSlider.3.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('div.mSlider').not('.rendered').mSlider();
        });
    </script>

Erklärung: Mit der Zeile: $('div.mSlider').not('.rendered').mSlider(); wird die Webseite nach div-Containern durchsucht die mit der Classenbezeichnung mSlider ausgezeichnet sind und mittels des Plugins als mSlider dargestellt werden.

Slider-Container erstellen

Auf Ihrer Website erstellen Sie einen DIV-Container mit einer ID, der Classe "mSlider", sowie dem Pfad zur Konfigurationsdatei die Sie in Step 1 erstellt haben (achten Sie auf den korrekten Pfad zu der Konfigurationsdatei und auf die richtige Datei-Endung .json bzw. .xml.

HTML-Body - Einbindung der Konfigurationsdatei
<div id='mSlider_demo_01_minimal' class='mSlider' data-mslider-conf-path='data/mSlider.json'></div>

Fallback einbinden

Nun sollte an der Stelle des DIV-Containers, den Sie in Step 3 erstellt haben, der mSlider angezeigt werden.
Ist jedoch Javascript deaktiviert, wird nichts gezeigt, da ohne die Ausführung von Javascript der DIV-Container nicht gefüllt wird und somit leer bleibt.
Sie können jedoch in diesem DIV-Container z.B. ein Bild einbinden, oder einen Text einfügen, der dann angezeigt wird, wenn Javascript deaktiviert ist. Der Inhalt wird automatisch durch Javascript entfernt, wenn der mSlider geladen wird.

HTML-Body mit Fallback
<div id='mSlider_demo_fallback' class='mSlider' data-mslider-conf-path='data/mSlider.json'> 
    <p>Bitte aktivieren Sie Javascript um den mSlider sehen zu können</p>
</div>

konfiguration

Der mSlider wird mittels einer Konfigurationsdatei konfiguriert. Es stehen zur Konfiguration zwei verschiedene Formate zur Verfügung, entweder JSON, oder XML. Etwas "schlanker" ist die Konfiguration per JSON. Sie können jedoch frei wählen. Um die Konfiguration per XML-Datei durchzuführen müssen Sie jedoch zusätzlich das jQuery-Plugin jquery.xml2json.js einbinden (http://www.fyneworks.com/jquery/xml-to-json/).

Die Konfigurationsdatei unterteilt sich in zwei Abschnitte, den Abschnitt mit den Basiswerten, die den gesamten mSlider betreffen, und dem Teil, in dem die einzelnen Slides definiert werden. Fügen Sie in Ihrer Konfigurationsdatei einfach die gewünschten Parameter hinzu um das gewünschte Verhalten zu erreichen.

Beispielkonfiguration

Hier ein etwas ausführlicheres Beispiel einer Konfiguration:

<?xml version="1.0" encoding="utf-8"?> 
<slider> 
    <basic> 
        <autoplayWaitTimeInit>4000</autoplayWaitTimeInit> 
        <mouseoverAutoplayStop>true</mouseoverAutoplayStop> 
        <navigationHeight>60</navigationHeight> 
        <navigationButtonHeight>50</navigationButtonHeight> 
    </basic> 
    <slides> 
        <img>img/slide_1/slide.jpg</img> 
        <link>http://www.mediafant.de</link> 
    </slides> 
    <slides> 
        <img>img/slide_2/slide.jpg</img> 
    </slides> 
    <slides> 
        <img>img/slide_3/slide.jpg</img> 
        <link>http://www.mediafant.de</link> 
    </slides> 
</slider>

    "basic": { 
        "autoplayWaitTimeInit": 4000, 
        "mouseoverAutoplayStop": "true", 
        "navigationHeight":60, 
        "navigationButtonHeight":50 
    }, 
    "slides": [{ 
        "img": "img/slide_1/slide.jpg", 
        "link": "http://www.mediafant.de" 
    },{ 
        "img": "img/slide_2/slide.jpg" 
    },{ 
        "img": "img/slide_3/slide.jpg", 
        "link": "http://www.mediafant.de" 
    }] 
}

Zur Erklärung:

Im Basis-Abschnitt wird die Wartezeit bevor der Slide zum nächsten wechselt auf 4 Sekunden eingestellt. Außerdem wird eingestellt, dass der automatische Slidewechsel gestoppt wird, sobald die Maus sich über dem mSlider befindet. Die Höhe für die Gesamtnavigation wird auf 60 Pixel und für die Navigationsbuttons 50 Pixel eingestellt (nähere Informationen siehe "Basis-Attribute").

Im Slide-Abschnitt:
Bei allen drei Slides wird der Pfad zu dem jeweiligen Bild definiert. Bei Slide eins und drei, wird das Bild zusätzlich aktiviert und mit einem Link belegt (nähere Informationen siehe "Slide-Attribute").

Basis-Attribute (betrifft den gesamten Slider)

autoplayAutorun
"true" | "false" (als String)
Bei true startet die Animation automatisch nach der voreingestellten Zeit und wechselt zur nächsten Seite. Andernfalls wechselt der mSlider die Seiten nur bei einem Click in der Navigation.
autoplayWaitTimeInit
Integer
Hiermit wird die Wartezeit definiert, bevor der Seitenwechsel erfolgt. dabei entspricht der Wert 1000 = 1 Sekunde
pagePos
Integer
Die Seitenzahl auf der der mSlider beginnen soll. Startwert ist 0 und zeigt die erste Seite. Soll der mSlider mit der zweiten Seite beginnen, setzen Sie den Wert auf 1
mouseoverAutoplayStop
"true" | "false" (als String)
Soll der automatische Seitenwechsel automatisch stoppen wenn der Mauszeiger sich über dem mSlider befindet, dann setzen Sie den Wert auf true
slideAnimationTime
Integer
Die Dauer der Animation bei einem Seitenwechsel. Der Wert 1000 steht für 1 Sekunde
slideAnimationEasing
Easing-Name (als String)
Wenn Sie einen anderen Effekt als "linear" einstellen möchten, so laden Sie bitte das Plugin jquery.easing.1.3.min.js herunter und binden es in Ihre HTML-Datei ein. Sie können anschließend aus 31 Effekten für die Animation wählen und einfach den Namen des jeweiligen Easings hier eintragen. Die Easing-Effekte und Namen finden Sie auf der Seite des Plugins: http://gsgd.co.uk/sandbox/jquery/easing/
stageWidth
Integer
Die Breite des mSliders in Pixeln
stageHeight
Integer
Die Höhe des mSliders in Pixeln
pathRelativ2Configfile
"true"|"false" (als String)
Als Standardeinstellung steht dieser Parameter auf false und verhält sich daher "natürlich". Das heißt sämtliche Pfadangaben in der Konfigurationsdatei werden im Verhältnis zur HTML-Datei interpretiert (also so als wenn Sie ein Bild in Ihre HTML-Seite einfügen würden).
Wenn Sie den Wert auf true stellen, verhalten sich die Pfadangaben NICHT relativ zur HTML-Datei, sondern relativ zur Konfigurationsdatei (also so, wie Sie das von den Pfadangaben in CSS-Dateien kennen).
navigationType
"number" | "thumbnail"
Um in der Navigation statt der Zahlen für die einzelne Seite darzustellen, können auch Tumbnails gewählt werden. Voraussetzung ist jedoch, dass in diesem Fall pro Seite ein Bild als Thumbnail definiert wird. (siehe Beispiel).
navigationHeight
Integer
Die Höhe der Navigation vom oberen Rand des mSliders in Pixeln.
navigationButtonHeight
Integer
Die Höhe der Navigation für die Buttons ohne den oberen Rand in Pixeln.
infoButtonsFadeTime
Integer
In jedem Slide, also auf jeder Seite können Buttons platziert werden, die eingeblendet werden, sobald die Seite vollständig angezeigt wird. Die Zeit für diese Einblendung kann hier eingestellt werden. Dabei ist der Wert 1000 = 1 Sekunde.
roundedCordner
'true' | 'false' (als String)
Wenn der Slider runde Ecken bekommen soll, setzen Sie den Wert auf "true".
designLayer
String
Es wird, sofern dieser Wert nicht null ist ein DIV eingefügt, in dem der hier eingegebene Code eingefügt wird. (Siehe Beispiel).
contentButtons
Object
Die beiden Buttons links und rechts am Sliderrand werden beim Start des Sliders animiert. Hier wird die Animation festgelegt.
animation
Object
duration
Integer
Dauer der Animation
easing
EasingName
Wenn Sie einen anderen Effekt als "linear" einstellen möchten, so laden Sie bitte das Plugin jquery.easing.1.3.min.js herunter und binden es in Ihre HTML-Datei ein. Sie können anschließend aus 31 Effekten für die Animation wählen und einfach den Namen des jeweiligen Easings hier eintragen. Die Easing-Effekte und Namen finden Sie auf der Seite des Plugins: http://gsgd.co.uk/sandbox/jquery/easing/
startPosition
Integer
Position bei der die Animation startet
targetPosition
Integer
Endpunkt der Animation

Die Slide-Attribute

Im Abschnitt "slides" kann für jeden einzelnen Slide definiert werden, wie dieser jeweilige Slide angezeigt werden soll. Sie Anzahl der Slides ist beliebig erweiterbar und auch die Anzahl der Buttons die in dem jeweiligen Slide angezeigt wird, ist beliebig.

Erläuterung der Attribute für die Slides
img
Pfad zum Bild
Diese Pfadangabe ist zwingend erforderlich und ist zugleich die einzige Mindestanforderung.
link
Linkziel/URL
Wenn das Bild verlinkt werden soll geben Sie das Linkziel, also die Adresse/ URL an. Wenn Sie keinen Link übergeben, wird das Bild nicht verlinkt.
econda
TrackingName
Sofern Sie Econda auf Ihrer Seite benutzen, können Sie hier den TrackingNamen eingeben. Wenn Sie kein Econda nutzen, sollte dieses Feld nicht übergeben werden, denn dies führt sonst zu einer Fehlermeldung, weil die zugehörige Econda-Funktion nicht auf Ihrer Seite enthalten ist.
thumbnail
Pfad zum Thumbnail-Bild
Wenn auf Ihrer Seite in der Navigation statt der Zahlen Thumbnails angezeigt werden sollen, geben Sie den Pfad zu dem Bild an, das als Thumbnail angezeigt werden soll.
buttons
Array
Wenn auf einem Slide Buttons angezeigt werden sollen, so können Sie diese hier definieren. Es ist möglich keinen Button zu definieren, einen oder mehrere. Pro Button können Sie bestimmte Attribute setzen.
imgOut
Pfad zum Buttonbild
Geben Sie hier den Pfad zu dem Bild des Buttons an.
imgOver
Pfad zum Buttonbild bei Over-Zustand
Geben Sie hier den Pfad zu dem Bild des Buttons an der angezeigt werden soll, wenn sich der Mauszeiger über dem Button befindet.
link
Linkziel/URL
Geben Sie hier das Linkziel an, wohin der Benutzer geführt wird, wenn er auf den Button klickt.
click
Function die aufgerufen wird
Statt einem Link können Sie auch eine Funktion definieren die ausgelöst werden soll, sobald der Button gedrückt wird. (siehe Beispiele)
posX
Integer
Geben Sie hier die X-Position des Buttons (vom linken Rand) ein.
posY
Integer
Geben Sie hier die Y-Position des Buttons (vom oberen Rand ohne den Navigationsbereich) ein.

CSS-Anpassungen

Wenn Sie von uns vergebene Werte der CSS-Definition ändern wollen, so sollten Sie nach der Einbindung unserer CSS-Dateien Ihre eigene CSS-Datei einbinden und in dieser Datei die gewünschten Änderungen vornehmen. Auf diese Weise bleibt Ihr Code updatefähig. (siehe Beispiele)

"Alle zusammen" oder "Einzeln"

Bei der Standardeinbindung werden mit diesem Code alle mSlider die auf der aktuellen Seite vorhanden sind, gleichzeitig aufbereitet und bereitgestellt.

Alle mfSlide-Container "auf einen Schlag"
<script type="text/javascript"> 
        $(document).ready(function() { 
            $('div.mSlider').not('.rendered').mSlider(); 
        }); 
    </script> 

Manchmal kann es gewünscht sein, nur einen einzelnen mSlider zu erzeugen. In diesem Fall muss der Code nur leicht abgewandelt werden:

Nur der Container mit einer bestimmten ID wird umgewandelt
<script type="text/javascript"> 
        $(document).ready(function() { 
            $('#mSlider_demo_single').not('.rendered').mSlider(); 
        }); 
</script> 

(bei dieser Variante wird nur ein bestimmter Container, in diesem Fall mit der ID "mSlider_demo_single" gesucht und in einen mSlider umgewandelt)

Die Class "rendered"

Um zu verhindern dass versehentlich der selbe Container ein zweites Mal gerendert wird, wird bei dem Start der Umwandlung automatisch die Klasse "rendered" hinzugefügt, die eine doppelte Aufbereitung verhindert.

Crossdomain Konfiguration

Sie können auch auf einem entfernt liegenden Server die Konfigurationsdatei, bzw. Konfigurationsdateien bereitstellen und von dort abrufen. Der Code ist in der Lage sich auch Domain-übergreifend die Konfigurationsdatei abzuholen. Also z.B. so:

<div id='mSlider_crossdomain_json' class='mSlider' data-mslider-conf-path='http://sources.mediafant.de/mSlider/demos/crossdomain/mslider_summer.xml'>
</div>
<div id='mSlider_crossdomain_json' class='mSlider' data-mslider-conf-path='http://sources.mediafant.de/mslider/demo/crossdomain/mslider_summer.json'>
</div>

beispiele

mSlider Fallback

CSS-Anpassungen

In der Regel werden Sie den mSlider wohl an Ihre eigenen Vorstellungen anpassen wollen, daher werden wir zunächst den Slider gestalterisch anpassen. Beachten Sie bitte, dass der mSlider ohne weitere Konfiguration so aussieht, wie Sie ihn unter "Minimaleinbindng" sehen.

Idealerweise werden Sie keine Änderungen am CSS des Sliders vornehmen, sondern die Werte des Sliders mit  Ihren eigenen Werten überschreiben. In diesem Beispiel ändern wir die Buttons oben in der Navigation (Button "stop", "back" und "next"), sowie die beiden Buttons links und rechts am Bühnenrand.

Erstellen Sie zunächst eine Abwandung der Buttons für die Navigation und die beiden Buttons links und rechts der Bühne.

Erstellen Sie anschließend eine CSS-Datei und speichern Sie diese ab. Wir nennen diese Datei hier "my.css". In der CSS-Date definieren wir nun für jeden der Buttons einen Pfad zu unseren neu erstellten Buttons. Beachten Sie, dass wir den jeweiligen Slider mit seiner konkreten ID ansprechen, um nicht alle Slider, die sich auf dieser Seite befinden, zu ändern.

@charset "utf-8";
/* CSS Document */

#mSlider_explCss.number div.navigation div.but.stop div.body {
    background-image: url('/mslider/theme_summer/buttons_navigation/number/stop.png');
}
#mSlider_explCss.number div.navigation div.but.back div.body {
    background-image: url('/mslider/theme_summer/buttons_navigation/number/back.png');
}
#mSlider_explCss.number div.navigation div.but.next div.body {
    background-image: url('/mslider/theme_summer/buttons_navigation/number/next.png');
}


#mSlider_explCss div.stage div.butLeft {
    background-image: url('/mslider/theme_summer/buttons_content/back.png');
}
#mSlider_explCss div.stage div.butRight {
    background-image: url('/mslider/theme_summer/buttons_content/next.png');
}

Verknüpfen Sie nun diese neu erstellte CSS-Datei in Ihrer HTML-Datei. Achten Sie darauf, dass diese neu erstellte CSS-Datei nach der Standard-CSS-Datei des Sliders eingebunden wird um sicher zu gehen, dass die Werte aus dieser Datei durch unsere neuen Einstellungen überschrieben werden.

In der Konfigurationsdatei tragen Sie die Pfade zu den Bildern ein, die in dem Slider zu sehen sein sollen. Nun sehen Sie den selben Slider wie er unter "Minimaleinbindung" zu sehen ist mit den geänderten Buttons.

<!-- Standard-Design des mSliders -->
<link href="css/mSlider.3.css" rel="stylesheet" type="text/css" />

<!-- Binden Sie Ihre CSS-Datei mit den Änderungen nach der Standarddefinition ein -->
<link href="css/my.css" rel="stylesheet" type="text/css" />

Bitte aktivieren Sie Javascript um den mSlider sehen zu können

Thumbnail-Navigation

Um in der Navigation, statt der Zahlen kleine Bilder - sogenannte Thumbnails - anzuzeigen, ist es erforderlich pro Slide ein (bzw. zwei) Thumbnail-Bild bereitzulegen. Erstellen Sie daher für jede Seite ein kleines Bild das in der Navigation angezeigt werden soll. Es ist ein Bild für den Over-Zustand und eines für den Standard-Zustand erforderlich.

In der Konfigurationsdatei tragen Sie den Pfad zu dem jeweiligen Thumbnailbild pro Slide ein und setzen im Abschnitt basic den Wert für das Attribut 'navigationType' auf thumbnail. Nun werden diese Thumbnail-Bilder statt der Zahlen angezeigt.
Wenn die Thumbnails von der Größe her nicht passen, können Sie die Werte für 'navigationHeight' und 'navigationButtonHeight' im Abschnitt 'basic' entsprechend ändern. Mit "navigationHeight" ist die Gesamthöhe der Navigation vom oberen Sliderrand, bis zum zwar unsichtbaren, aber evtl. aktiven Infobereich gemeint. Mit "navigationButtonHeight" ist die Höhe der Navigationsbuttons, bzw. Thumbnails gemeint. Die Buttons werden automatisch mittig ausgerichtet.

Weil Thumbnails vermutlich etwas vergrößerte Navigationselemente benötigen, gibt es die Klasse "thumbnails, bzw. "number" die automatisch dem Slider-Container hinzugefügt wird. So können wir für die eine, oder die andere Variante, unterschiedliche CSS-Einstellungen wählen.

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <mouseoverAutoplayStop>true</mouseoverAutoplayStop>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "mouseoverAutoplayStop": "true",
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    }
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    }
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    }
    }]
}

Bitte aktivieren Sie Javascript um den mSlider sehen zu können

Mehrere Infobuttons

In dem mSlider ist es möglich, einen oder mehere Buttons ganz unterschiedlicher Art und völlig frei auf der Sliderbühne zu positionieren. Und sie können den Buttons unterschiedliche Linkziele geben. Wenn Sie für das Sliderbild einen Link definieren, so wird ebenfalls das Hintergrundbild im Infobereich aktiviert. Der Infobereich ist der Bereich zwischen dem linken und rechten Button und unterhalb der Navigation.

Um Buttons einzubinden geben Sie den Pfad zum Bild des jeweiligen Buttons an. Ein Pfad zum Standard-Zustand (out), und ein Pfad zum aktiven Zustand, wenn sich der Mauszeiger über dem Button befindet, oder die Seite aktuell angezeigt wird. Die Position des Buttons geben Sie über die X und Y-Koordinaten an und bezieht sich auf den Infobereich.

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <mouseoverAutoplayStop>true</mouseoverAutoplayStop>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "mouseoverAutoplayStop": "true",
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/frisch_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/frisch_over.png",
                "posX": 480,
                "posY": 90
        },{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/mehr_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/mehr_over.png",
                "posX": 180,
                "posY": 70
        }]
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_2/buttons/flott_out.png",
                "imgOver": "/mslider/theme_summer/slide_2/buttons/flott_over.png",
                "posX": 590,
                "posY": 20
        }]
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "link": "http://www.mediafant.de",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_3/buttons/spritzig_out.png",
                "imgOver": "/mslider/theme_summer/slide_3/buttons/spritzig_over.png",
                "posX": 500,
                "posY": 40
        }]
    }]
}

Bitte aktivieren Sie Javascript um den mSlider sehen zu können

Design-Layer

Manchmal ist es gewünscht dass ein Element nicht mit jedem Slidewechsel aus- und wieder einfährt, sonder fix auf der Bühne positioniert bleibt. Um dies zu ermöglichen, bietet der mSlider die Möglichkeit einen DesignLayer auf der Bühne einzufügen. Dieser DesignLayer ist ein DIV, das mit dem Code bestückt wird, den Sie dem Parameter übergeben. Sie können dem Layer einen Klassennamen zuordnen, so dass Sie diesen Layer über Ihre CSS-Definitionen ansprechen können. Und Sie können den gewünschten Code übergeben.

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider><?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60,
        "designLayer": {
            "className":"myLayer",
            "code":"<div class='logo'><a href='http://sources.mediafant.de/mSlider'><img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /></a></div>"
        }
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/frisch_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/frisch_over.png",
                "posX": 480,
                "posY": 90
        },{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/mehr_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/mehr_over.png",
                "posX": 180,
                "posY": 70
        }]
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_2/buttons/flott_out.png",
                "imgOver": "/mslider/theme_summer/slide_2/buttons/flott_over.png",
                "posX": 590,
                "posY": 20
        }]
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "link": "http://www.mediafant.de",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_3/buttons/spritzig_out.png",
                "imgOver": "/mslider/theme_summer/slide_3/buttons/spritzig_over.png",
                "posX": 500,
                "posY": 40
        }]
    }]
}

In Ihrer CSS-Datei können Sie dann die gewünschten Optionen für diesen Layer vornehmen.

#mSlider_explDesignlayer div.myLayer img {
    margin: 40px 0 0 40px;
}

Bitte aktivieren Sie Javascript um den mSlider sehen zu können

reset

Button-Animation


Mit den Einstellungen von "contentButtons/animation" können Sie einstellen, ob die beiden Buttons links und rechts der Bühne bei dem Start des Sliders animiert werden sollen. Wenn Sie das Plugin jquery.easing.1.3.min.js von hier: http://gsgd.co.uk/sandbox/jquery/easing/ heruntergeladen und in Ihre HTML-Seite eingebunden haben, stehen Ihnen 31 verschiedene easing-Effekte zur Verfügung. Sie können unter dem oben genannten Link alle Effekte in Aktion sehen. Wählen Sie den von Ihnen gewünschten Effekt aus und tragen Sie dessen Namen in die Konfigurationsdatei ein. Das Gleiche können Sie für den Slide-Wechsel definieren, wählen Sie hierfür den Parameter: "slideAnimationEasing".

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <slideAnimationEasing>easeOutExpo</slideAnimationEasing>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <contentButtons>
            <animation>
                <duration>1500</duration>
                <easing>easeOutBounce</easing>
                <startPosition>300</startPosition>
                <targetPosition>0</targetPosition>
            </animation>
        </contentButtons>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "slideAnimationEasing":"easeOutExpo",
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60,
        "contentButtons":{
            "animation":{
                "duration":1500,
                "easing":"easeOutBounce",
                "startPosition":300,
                "targetPosition":0
            }
        },
        "designLayer": {
            "className":"myLayer",
            "code":"<div class='logo'><a href='http://sources.mediafant.de/mSlider'><img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /></a></div>"
        }
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/frisch_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/frisch_over.png",
                "posX": 480,
                "posY": 90
        },{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/mehr_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/mehr_over.png",
                "posX": 180,
                "posY": 70
        }]
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_2/buttons/flott_out.png",
                "imgOver": "/mslider/theme_summer/slide_2/buttons/flott_over.png",
                "posX": 590,
                "posY": 20
        }]
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "link": "http://www.mediafant.de",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_3/buttons/spritzig_out.png",
                "imgOver": "/mslider/theme_summer/slide_3/buttons/spritzig_over.png",
                "posX": 500,
                "posY": 40
        }]
    }]
}
  • frisch
  • flott
  • spritzig
  • meer

Bitte aktivieren Sie Javascript um den mSlider sehen zu können

Info-Button-Click

Manchmal, solle bei einem Klick auf einen Infobutton kein Seitenwechsel stattfinden, sondern eine Javascript-Aktion auf der Seite selbst ausgelöst werden. Sie sehen hier, wie bei einem Klick auf einen Button die zugehörigen Wörter über dem Slider per Javascript animiert werden.

Die Umsetzung ist denkbar einfach. Geben Sie bei dem jeweiligen Button einfach die Funktion (als String) so ein, wie Sie bei einem Click ausgelöst werden soll. Erwartet wird, dass diese Funktion auf Ihrer Seite zur Verfügung steht.

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <slideAnimationEasing>easeOutExpo</slideAnimationEasing>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <contentButtons>
            <animation>
                <duration>1500</duration>
                <easing>easeOutBounce</easing>
                <startPosition>300</startPosition>
                <targetPosition>0</targetPosition>
            </animation>
        </contentButtons>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <click>demoActivity('frisch')</click>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <click>demoActivity('meer')</click>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <click>demoActivity('flott')</click>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <click>demoActivity('spritzig')</click>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "slideAnimationEasing":"easeOutExpo",
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60,
        "contentButtons":{
            "animation":{
                "duration":1500,
                "easing":"easeOutBounce",
                "startPosition":300,
                "targetPosition":0
            }
        },
        "designLayer": {
            "className":"myLayer",
            "code":"<div class='logo'><a href='http://sources.mediafant.de/mSlider'><img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /></a></div>"
        }
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/frisch_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/frisch_over.png",
                "click": "demoActivity('frisch')",
                "posX": 480,
                "posY": 90
        },{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/mehr_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/mehr_over.png",
                "click": "demoActivity('meer')",
                "posX": 180,
                "posY": 70
        }]
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_2/buttons/flott_out.png",
                "imgOver": "/mslider/theme_summer/slide_2/buttons/flott_over.png",
                "click": "demoActivity('flott')",
                "posX": 590,
                "posY": 20
        }]
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "link": "http://www.mediafant.de",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_3/buttons/spritzig_out.png",
                "imgOver": "/mslider/theme_summer/slide_3/buttons/spritzig_over.png",
                "click": "demoActivity('spritzig')",
                "posX": 500,
                "posY": 40
        }]
    }]
}
  • frisch
  • flott
  • spritzig
  • meer
mSlider Fallback
reset

Feinschliff

Zum Schluss noch etwas Feinschliff. Runde Ecken per Knopfdruck, zügigerer Seitenwechsel, ein Stop sofern sich die Maus über dem Slider befindet ...

<?xml version="1.0" encoding="UTF-8" ?>
<slider>
    <basic>
        <autoplayAutorun>false</autoplayAutorun>
        <autoplayWaitTimeInit>4000</autoplayWaitTimeInit>
        <mouseoverAutoplayStop>true</mouseoverAutoplayStop>
        <slideAnimationEasing>easeOutExpo</slideAnimationEasing>
        <navigationType>thumbnail</navigationType>
        <navigationHeight>70</navigationHeight>
        <navigationButtonHeight>60</navigationButtonHeight>
        <roundedCordner>true</roundedCordner>
        <contentButtons>
            <animation>
                <duration>1500</duration>
                <easing>easeOutBounce</easing>
                <startPosition>300</startPosition>
                <targetPosition>0</targetPosition>
            </animation>
        </contentButtons>
        <designLayer>
            <className>myLayer</className>
            <code>&lt;div class='logo'&gt;&lt;a href='http://sources.mediafant.de/mSlider'&gt;&lt;img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /&gt;&lt;/a&gt;&lt;/div&gt;</code>
        </designLayer>
    </basic>
    <slides>
        <img>/mslider/theme_summer/slide_1/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_1/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_1/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/frisch_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/frisch_over.png</imgOver>
            <click>demoActivity('frisch')</click>
            <posX>480</posX>
            <posY>90</posY>
        </buttons>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_1/buttons/mehr_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_1/buttons/mehr_over.png</imgOver>
            <click>demoActivity('meer')</click>
            <posX>180</posX>
            <posY>70</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_2/slide.jpg</img>
        <thumbnail>
            <out>/mslider/theme_summer/slide_2/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_2/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_2/buttons/flott_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_2/buttons/flott_over.png</imgOver>
            <click>demoActivity('flott')</click>
            <posX>590</posX>
            <posY>20</posY>
        </buttons>
    </slides>
    <slides>
        <img>/mslider/theme_summer/slide_3/slide.jpg</img>
        <link>http://www.mediafant.de</link>
        <thumbnail>
            <out>/mslider/theme_summer/slide_3/thumb/out.png</out>
            <over>/mslider/theme_summer/slide_3/thumb/over.png</over>
        </thumbnail>
        <buttons>
            <imgOut>/mslider/theme_summer/slide_3/buttons/spritzig_out.png</imgOut>
            <imgOver>/mslider/theme_summer/slide_3/buttons/spritzig_over.png</imgOver>
            <click>demoActivity('spritzig')</click>
            <posX>500</posX>
            <posY>40</posY>
        </buttons>
    </slides>
</slider>
{
    "basic": {
        "autoplayAutorun":"false"
        "autoplayWaitTimeInit": 4000,
        "mouseoverAutoplayStop": "true",
        "slideAnimationEasing":"easeOutExpo",
        "navigationType":"thumbnail",
        "navigationHeight":70,
        "navigationButtonHeight":60,
        "roundedCordner":"true",
        "contentButtons":{
            "animation":{
                "duration":1500,
                "easing":"easeOutBounce",
                "startPosition":300,
                "targetPosition":0
            }
        },
        "designLayer": {
            "className":"myLayer",
            "code":"<div class='logo'><a href='http://sources.mediafant.de/mSlider'><img src='/mslider/shared/logo_white.png' alt='mSlider-Logo' /></a></div>"
        }
    },
    "slides": [{
        "img": "/mslider/theme_summer/slide_1/slide.jpg",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_1/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_1/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/frisch_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/frisch_over.png",
                "click": "demoActivity('frisch')",
                "posX": 480,
                "posY": 90
        },{
                "imgOut": "/mslider/theme_summer/slide_1/buttons/mehr_out.png",
                "imgOver": "/mslider/theme_summer/slide_1/buttons/mehr_over.png",
                "click": "demoActivity('meer')",
                "posX": 180,
                "posY": 70
        }]
    },{
        "img": "/mslider/theme_summer/slide_2/slide.jpg",
        "thumbnail":{
                    "out":"/mslider/theme_summer/slide_2/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_2/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_2/buttons/flott_out.png",
                "imgOver": "/mslider/theme_summer/slide_2/buttons/flott_over.png",
                "click": "demoActivity('flott')",
                "posX": 590,
                "posY": 20
        }]
    },{
        "img": "/mslider/theme_summer/slide_3/slide.jpg",
        "link": "http://www.mediafant.de",
        "thumbnail": {
                    "out":"/mslider/theme_summer/slide_3/thumb/out.png",
                    "over":"/mslider/theme_summer/slide_3/thumb/over.png"
                    },
        "buttons": [{
                "imgOut": "/mslider/theme_summer/slide_3/buttons/spritzig_out.png",
                "imgOver": "/mslider/theme_summer/slide_3/buttons/spritzig_over.png",
                "click": "demoActivity('spritzig')",
                "posX": 500,
                "posY": 40
        }]
    }]
}

Und damit im Falle dessen, dass Javascript deaktiviert ist, nicht ein simpler Text, sondern ein schönes Ersatzbild zu sehen ist, erstellen wir noch ein Bild für den Fallback und binden dieses in der HTML-Datei entsprechend ein.

<div id="mSlider_explCompletion" class="mSlider" data-mslider-conf-path="/mslider/demo/expl_completion/mslider_summer.json">
    <img src="/mslider/theme_summer/fallbacks/rounded.jpg" alt="mSlider Fallback" />
</div>

kommentare

Einen eigenen Kommentar schreiben
Einen eigenen Kommentar schreiben