Zu große Bilder automatisch verkleinern (Forum, Blog, etc.)

Hi,

inbesondere in Foren kennt man die Problematik, dass sehr große Bilder eingebettet werden können die das Layout sprengen.

Nach einigen Tests und Varianten bin ich nun schlussendlich zu diesem Script gekommen:
Code:

// shrink all images
var ws = 0
function sai() {
	ws = window.innerWidth ? window.innerWidth : document.body && document.body.offsetWidth ? document.body.offsetWidth : screen.width;
	if (document.images.length) {
		var i = document.images;
		for (var x = 0; x < i.length; x++) {
			if (i[x].width * 2 > ws) {
				if (typeof i[x].ow == 'undefined') {
					i[x].ow = i[x].width;
					i[x].oh = i[x].height;
				}
				i[x].width = i[x].ow / (i[x].ow / (ws / 2));
				if (i[x].height == i[x].oh) {
					i[x].height = i[x].height / (i[x].ow / (ws / 2));
				}
				if (i[x].parentNode.nodeName != 'A') {
					i[x].onclick = ri;
					i[x].title = i[x].src;
					i[x].className = 'resized';
				}
			}
		}
	}
};
// restore image (element)
function ri(e) {
	var o = window.event ? window.event.srcElement : e.target;
	o.width = o.ow;
	if (o.height != o.oh) {
		o.height = o.oh;
	}
	o.onclick = si;
};
// shrink image (element)
function si(e) {
	var o = window.event ? window.event.srcElement : e.target;
	o.width = o.width / (o.width / (ws / 2));
	if (o.height == o.oh) {
		o.height = o.height / (o.ow / (ws / 2));
	}
	o.onclick = ri;
};

Das Script starten wir über body onload:
Code:

<body onload="sai();">

Damit der Nutzer weiß, dass er das Bild per Klick vergrößern kann, gebe ich der Maus den passenden Zeiger per CSS:
Code:

.resized {
	cursor:pointer;
}

Erklärung:
Zuerst wird die Größe des Browserfensters ermittelt. Falls die nicht vorhanden ist, wird die Bildschirmauflösung genutzt.

Im zweiten Schritt werden alle Bilder der Seite durchgearbeitet und auf ihre Größe hin geprüft. Ist die doppelte Bildbreite größer als das Browserfenster, so wird das Bild automatisch verkleinert. Für diesen Wert habe ich mich entschlossen, weil in meinem Forum links neben jedem Beitrag noch eine Spalte mit den Autorenangaben ist.

Alle Bilder die zu groß sind erhalten nun die CSS-Klasse "resized", als Titel den Dateinamen und das onclick-Attribut mit dem das Bild bei Bedarf wieder durch den Besucher vergrößert werden kann.

Das gilt allerdings nicht für Bilder, die bereits verlinkt wurden. Hier gehe ich einfach davon aus, dass die Verlinkung zur großen Version des Bildes führt.

Vorteile gegenüber anderen Scripten:
Früher habe ich Scripte eingesetzt, die ich über img onload ausgeführt habe. Dazu musste ich in den HTML-Quelltext eingreifen. Weiterhin hatte das einen simplen Nachteil. War das Bild bereits im Browsercache, so wurde es nicht mehr verkleinert.

Später umging ich das über einen Trick. Ich nutzte onmouseover, um durch den Mauszeiger eine Verkleinerung für diesen Zweck zu erzwingen.

Doch nun bin ich schlussendlich bei body onload gelandet, da dies in jedem Fall zur Verkleinerung führt. Auch muss nicht in den HTML-Quelltext eingegriffen werden.

Viel Spaß damit!