Thumbnail im HTML durch anklicken wieder vergrössern !?

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.

Funktioniert so nicht. Genauer gesagt: Funktioniert nur beim ersten Öffnen der Lightbox.

Ab dem zweiten Mal steht ja schon der URL des zuvor angezeigten Bildes im src-Attribut^[1] und das falsche Bild wird blitzt kurz auf, bevor das anzuzeigende Bild geladen ist. Man müsste also src erst nullen.

Aber wenn man da sowieso ran muss, kann man auch gleich das Vorschaubild dort eintragen anstatt dieses als Hintergrundbild zu setzen. In meinem Codepen sieht’s jetzt so aus:

	// show enlarged preview image while big image is being loaded
	lightboxImage.src = lightboxThumbnail.src;
	requestAnimationFrame(() => {
		lightboxImage.src = lightboxThumbnail.dataset.src ?? lightboxLink.href;
	});

🖖 Живіть довго і процвітайте

---

1. Genauer gesagt: in der src-Eigenschaft des Elementobjekts ↩︎