Split Image Slider

Vorher Nacher Bild erstellen, Split Comparison Slider, in diesem Tutorial soll es darum gehen einen Image Slider zu erstellen. Dieser stellt zwei Bilder übereinander dar. Der Benutzer kann mittels eines Sliders zwischen beiden Bildern hin und her wechseln.

Ein Beispiel sagt in diesem Fall mehr als tausend Worte:

Da wir das Rad nicht komplett neu erfinden wollen, verwenden wir eine fertige Komponente. In diesem Fall vom Github-Projekt https://github.com/jotform/before-after.js. Die Komponente ist vollständig responsiv und lässt sich leicht in eine Webseite integrieren.

Am Ende gibt es den kompletten Download des Beispiels.

Videoanleitung

Anleitung

Schauen wir uns zuerst die Dateien des Scriptes an:

Wir haben zwei Bilddateien, eine CSS-Datei und eine Java-Script-Datei. Die beiden Bilder sollten die gleiche Größe haben, da diese ja beide überlagert werden. Diese müssen allerdings nicht speziell angepasst werden, da unser Code darauf automatisch Rücksicht nimmt und die Größe im Browser responsiv anpasst. Natürlich sollte man auch keine 12 MB großen Original-Bilder direkt von der Digicam verwenden. 🙂

In unsere HTML-Datei fügen wir nun den Code für die Bilder ein:

<div class="ba-slider">
   <img src="1.jpg">
   <div class="resize">
       <img src="2.jpg">
   </div>
   <span class="handle"></span>
</div>		

Hier muss man nur die beiden URLs zu den Bildern abändern. Die Formatierung übernimmt der CSS-Code, diesen fügen wir ebenfalls ein (Head-Bereich):

<link type="text/css" href="before-after.css" rel="stylesheet">

Damit der Slider nun noch loslegt und funktioniert, kommt Java-Script ins Spiel:

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="before-after.js"></script>

<script type="text/javascript">
  $('.ba-slider').beforeAfter();
</script>

Die erste Zeile bindet jQuery ein. Darauf kann man verzichten, sofern man dieses bereits verwendet. Es folgt die Java-Script-Datei für die Slider-Funktion.

Zuletzt wenden wir den Slider auf unser oben definiertes DIV-Element an. Will man mehrere Slide-Bilder auf einer Seite verwenden, muss man die ID anpassen. Diese ist in unserem Beispiel ba-slider.

Anpassungen

Größe

Der Slider schnappt sich standardmäßig den zur Verfügung stehenden Raum. D.h. stehen dem Bild die komplette Breite zur Verfügung, verwendet er diese auch:

Dies können wir abändern, indem wir den Slider von einem begrenzenden DIV-Element umgeben:

<div style="width:600px;">				
	<div class="ba-slider">
	   <img src="1.jpg">
	   <div class="resize">
	       <img src="2.jpg">
	   </div>
	   <span class="handle"></span>
	</div>
</div>

In diesem Fall hat das äußere DIV-Element eine Breite von 600 Px. Das Ergebnis sieht so aus:

Die Höhe passt sich automatisch an.

Slider Element

In der Mitte des Sliders ist ein sehr sichtbarer Knopf:

Die Darstellung wird über den CSS-Code gesteuert. In der CSS-Datei wird dieser über den folgenden Code gesteuert:

.ba-slider .handle:after {  /* Big orange knob  */
    position: absolute;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
 
    content:'\21d4';
    color:white;
    font-weight:bold;
    font-size:36px;
    text-align:center;
    line-height:64px;
 
    background: #ffb800; /* @orange */
    border:1px solid #e6a600; /* darken(@orange, 5%) */
    border-radius: 50%;
    transition:all 0.3s ease;
    box-shadow:
      0 2px 6px rgba(0,0,0,.3), 
      inset 0 2px 0 rgba(255,255,255,.5),
      inset 0 60px 50px -30px #ffd466; /* lighten(@orange, 20%)*/ 
}

.ba-slider .handle.ba-draggable:after {
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    line-height:50px;
    font-size:28px;
}	

Man kann diesen Code z.B. komplett entfernen. Dann wird nur der Balken dargestellt:

Die Position des Knopfes kann über die Eigenschaft top: 50%; gesteuert werden. 50% ist genau die Mitte. 80% verschiebt ihn zum unteren Rand hin.

Die Eigenschaften:

width: 64px;
height: 64px;
margin: -32px 0 0 -32px;

Legen die Größe fest. Man sieht im oberen Code, dass es Einstellungen für den Normalzustand und den Zustand des Ziehens gibt. Für beide Zustände lassen sich hier die Eigenschaften festlegen. Hier kann man etwas herumspielen, bis die optimale Darstellung gefunden ist.

Download

Download des Beispiels

In diesem Sinne, viel Spaß beim Herumprobieren.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert