AfterImage ist ein Plugin auf der Grundlage von jQuery und jQuery Mobile, das Unterschiede zwischen zwei Images visualisiert. Mit einem Slider können Bereiche auf den Bildern ausgewählt werden. Touch-Events werden dabei unterstützt. Über verschiedene Optionen wird das Plugin angepasst, so z. B. der Font und der Inhalt von Tooltips, die Position des Sliders oder die Akzentfarbe der Bedienelemente.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element mit einer ID oder Class. Dieses Element nimmt zwei img-Elemente auf. Das erste Image befindet sich auf der linken Seite, das zweite Image liegt rechts.
<div class="container">
<img src="before.jpg" alt="image before">
<img src="after.jpg" alt="image after">
</div>
Im Script wird die Funktion "afterImage" an der ID oder der Class des Hauptcontainers aufgerufen:
$('.container').afterImage({
});
Optionen
width: ['n'] ; default: '40%'Breite des Hauptcontainers. Es können absolute CSS-Values (px) oder relative CSS-Values (%) für ein responsives Verhalten gesetzt werden.
sliderPosition: [0 - 100] ; default: 50Setzt die Position des Sliders in Prozent, beginnend von der linken Seite des Haupcontainers.
tooltip: [true | false | 'hover'] ; default: 'hover'Ist true gesetzt, sind die Tooltips permanent sichtbar; 'hover' aktiviert die Tooltips mit der Maus; false deaktiviert die Tooltips.
tooltipText: [['String' , 'String']] ; default: ['BEFORE' , 'AFTER']Legt den Text der Tooltips von links nach rechts fest.
tooltipFont: ['font'] ; default: 'default'Legt des Schriftfont der Tooltips fest.
accentColor: ['color'] ; default: 'rgb(245,245,245)'Bestimmt die Akzentfarbe der Bedienelemente und der Tooltips. Alle gültigen CSS-Values können verwendet werden.