Bilder Galerie

Ich zeige hier wie man eine sehr einfache Bildergalerie mit Javascript erstellt. Die Beispiele beginnen mit einer sehr einfachen Bildergalerie und werden mit jedem Beispiel etwas komplexer. Da kein Framework genutzt wird, hat man eine geringe Dateigröße und die Beispiele kann gut nachvollziehen.

Step by Step Tutorial Image Gallery

In der folgenden Schritt für Schritt Anleitung, werden mittels mehrerer Beispiele Bildergalerien erstellt. Infos siehe unten.

  1. Gallery
  2. Gallery
  3. Gallery
  4. Gallery
  5. Gallery
  6. Gallery

Komplexere Beispiele Step by Step

Aufklappbares Buch | Bilder Carousel | 3D Rotate Gallery | Fade Gallery

Gallery 1

Alle Bilder liegen in einem Ordner und sind namentlich durchnummeriert.
img/gallery/bild0.jpg
img/gallery/bild1.jpg
etc.

HTML

Ein Bild mit der id slideImg liegt im Body-Bereich.

<img src="img/gallery/bild0.jpg" width="940" height="600" alt="Möbel" id="slideImg"/>

CSS

Die Größe des Bildes passt sich an kleinere Bildschirmgrößen an.

img {
    max-width: 100%;
    height: auto;
}

Javascript

Direkt vor dem schließenden Body-Tag wird das Javascript eingefügt.

var amount = 12; // Die Anzahl der Bilder
var nr = 0; // eine Zählvariable, welche die aktuelle Bildnummer speichert
var bilder = new Array(); // Pfade zu den Bildern

In einer for-Schleife werden die Pfade zu den Bildern dem Array zugewiesen.

	for(i=0; i < amount; i++){
		bilder[i] = "img/gallery/bild"+i+".jpg";
		}

Das Bild im Body bekommt einen EventListener und ruft die Funktion nexPic auf.

document.getElementById("slideImg").onclick = nextPic;

nextPic()

In einer if Struktur wird die Variable nr um 1 erhöht oder auf 0 gesetzt, wenn der höchste Index des Arrays "bilder" erreicht ist.
Mit dieser Variable nr kann man jeweils das nächste Arrayelement ansprechen. bilder[nr].

Mittels DOM wird die Referenz auf das Bild geändert.

document.getElementById('slideImg').setAttribute('src', bilder[nr]);

Beispiel Gallery 1

Gallery 2

In diesem Beispiel Gallery 2 kommen 2 Navigationsbuttons hinzu (prev.png und next.png).

Positionionieren der Buttons per CSS

Die Buttons werden links und rechts über dem Bild positioniert. Das geschieht mit position:absolute; Das Bild und die Buttons liegen in einem div mit der id="imgContainer" Dieser bekommt position:relative, denn sonst könnte Position absolute nicht greifen.

Die vertikale Positionierung geschieht mittles flexbox, denn ein absoluter vertikaler Wert würde nicht funktionieren, wenn das Bild bei kleinerer Bildschrimgröße verkleinert dargestellt wird.

		div#imgContainer{
		position:relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

orientation:landscape / Querformat

Bei einer Querformat Bildschirmanzeige, beispielsweise auf dem Smartphone, wird die Bildhöhe als maximaler Größenwert genommen. Das geschieht mittels CSS und Media Querie

	@media only screen and (orientation: landscape) {
		img#slideImg {
   		max-width: 144vh;
    		max-height: 90vh;
		}
	}

144vh errechnet man aus dem Seitenverhältnis der Bilder.
Die Bilder haben alle das gleiche Seitenverhältnis 940 x 600 Pixel oder 94/60 = 1,5666
Die Breite ist somit 1,5666 mal größer als die Höhe.
Die maximale Höhe wurde auf 90vh gesetzt. 90% der Viewport Höhe
Die Breite wird errechnet mit 90vh * 1,5666 = 141vh und ein paar Zerquetschte.

Bei einer anderen Bildgröße muss selbstverständlich dieses CSS angepasst werden.

Javascript

Im Javascript bekommt jeder Button einen EventHandler mit Funktionsaufruf. Es gibt 2 Funktionen nextPic und prevPic. Dort wird die Variable nr rauf- bzw. runtergezählt.

Gallery 3

In Beispiel Gallery 3 wird ein Ein und Ausblenden mittels CSS transition und der CSS Eigenschaft opacity erzeugt.
transition: opacity 0.4s;

Die Schwierigkeit ist hier, dass das Neuladen des anderen Bildes erst dann geschehen darf, wenn das Bild ausgeblendet ist und danach soll sich das neu geladene Bild einblenden. Das Aus und Einblenden dauert immer 400 Millsekunden, wegen des eingebenen CSS Wertes 0.4s
Die Funktion showNext und showPrev blendet das Bild aus und ruft mit einer Zeitverzögerung von 4 Millisekunden die Funktion nextPic, bzw prevPic auf.
setTimeout('nextPic()',400);
In diesen Funktionen wird das Bild gewechselt und eingeblendet. Das Einblenden dauert wieder 4 Millisekunden. Selbstverständlich kann manhier auch andere CSS Eigenschaften einsetzen, wie im nächsten Beispiel.

Alternativ könnte man CSS Animations oder Transitions mittels Javascript Events animationend oder transitionend steuern.

Siehe MDN Webdocs Animation
Siehe dazu auch CSS Tricks,

Gallery 4

Dieses Beispiel Gallery 4 funtkioniert auf gleiche Art wie das vorige Beispiel nur die CSS Eigenschaft opacity wurde durch CSS transform rotateY ersetzt.

Beim ersten Durchlauf, kann es zu einer ruckeligen Darstellung kommen, da die Bilder nicht vorausgeladen wurden.
siehe Preload Images

Gallery 5

responsive

Dieses Beispiel Gallery 5 ist responsive, es werden je nach Bildschirmbreite kleinere oder größere Bilder geladen.
Siehe dazu w3schools Media Queries Javascript oder sitepoint match media

Es gibt hier einen Ordner mit großen Bildern von 1200 Pixeln Breite und einen Ordner mit kleinen Bildern von 600 Pixeln Breite.
In den vorigen Versionen wurden die ULRs zu den Bilder mittels for-Schleife dem Array bilder zugewiesen.
In diesem Beispiel gibt es eine if- Struktur, welche auf maximal 700 Pixel Bildschirmbreite abfragt. Je nachdem wird dann auf eine von beiden Forschleifen verwiesen. Eine for-Schleife verweist auf die kleinen Bilder, die andere auf die großen Bilder. Die Bilder werden dem Array bilder zugewiesen.

3D Effekt

Siehe dazu auch meinen Tipp CSS3 Transform.

Der perspektivische Effekt entsteht, wenn man dem Elternelement die CSS Eigenschaft perspective zuweist.
perspective: 800px;

Im Javascript bekommt das Bild ein rotateX und ein scale zugewiesen.
bigPic.style.transform = 'rotateX(90deg) scale(0.1,0.1)';

In meinem CSS Tipp Transform befinden sich weitere Beispiele mit Galerien und 3D Drehung, die auch mit Javascript gesteuert werden.

Gallery 6

In Gallery6 wird ein Touch oder Swipe Event hinzugefügt. Der Einfachheit halber wurde hier die Javascript Bibliothek hammer.js eingebunden. Diese sollte man sich herunterladen und im Head Bereich einbinden.

<script type="text/javascript" src="js/hammer.min.js">

Im Script wird ein neues Hammer Objekt erzeugt mit Verweis auf ein Element. In diesem Fall das img Element mit der Klasse slideImg.

var mc = new Hammer(slideImg);

Es werden die beiden Events swiperight und swipeleft hinzugefügt und die zuvor erstellten Funktionen aufgerufen. In diesem Beispiel habe ich die CSS Animation etwas geändert.

	var mc = new Hammer(slideImg);
	mc.on("swiperight", showNext);
	mc.on("swipeleft", showPrev);
		

Da hamner.js auch ein Ziehen mit der Maus nach links oder rechts unterstützt, habe ich die beiden Pfeil-Buttons an den linken und rechten Rand des Browserfensters gesetzt. Dazu habe ich im umgebenden div#imgContainer die Eigenschaft position:relative entfernt. Siehe CSS Position absolute.

 

Javascript Tipps