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

mgutt · 05.02.2010, 21:27

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!

programmierer-forum.de · Gast

Mach mit!

Wenn Dir die Beiträge zum Thema "Zu große Bilder automatisch verkleinern (Forum, Blog, etc.)" gefallen haben oder Du noch Fragen hast oder Ergänzungen machen möchtest, solltest Du Dich gleich bei uns anmelden:

» Anmelden

Registrierte Mitglieder genießen die folgenden Vorteile:
✔ kostenlose Mitgliedschaft
✔ keine Werbung
✔ direkter Austausch mit Gleichgesinnten
✔ neue Fragen stellen oder Diskussionen starten
✔ schnelle Hilfe bei Problemen
✔ Bilder und Videos hochladen
✔ und vieles mehr...

	Re:	Hits	Letzter Beitrag
[Guide] Wie kann ich (mehrere) Bilder verkleinern Bilder verkleinern Dieser Tipp funktioniert nur bei Windows XP ( Alternative: Windows Image Resizer Power Toy ) Also alle die mal ein Bild an einen Beitrag anhängen möchten, in der Galerie mit dem hochladen Probleme haben bzw. bei Ebay auch... Seite 2, 3, 4von mgutt	36	2369	20.07.2009, 20:01 Mattes
PDF verkleinern/komprimieren (nur enthaltene Bilder) Weiß jemand wie man ein pdf verkleinert und zwar so komprimiert, dass nur die Bilder an Qualität verlieren? Ich habe mit irfan view probiert, aber der skaliert alles als Bild. Dabei werden also auch die selektierbaren Schriften in ein Bild umgewandelt.... von mgutt	3	83	01.01.2012, 15:08 mgutt
Hondanews - mein Blog Dein Blog Hallo, alle News findet ihr nun zusammengefasst unter: www.hondanews.de - der Honda News Blog Es wird noch ein bisschen was dazu kommen. Ich hoffe er gefällt... von mgutt	5	392	23.03.2007, 22:30 mgutt
Bilder werden nun automatisch eingebettet Die [ IMG ]-Tags sind nicht mehr von Nöten, wenn man einen Bilderlink postet. Das hier: http://www.maxrev.de/files/2004/10/thumbs/t_t_19142.jpg.detailed.jpg Wird beim Absenden jetzt automatisch zu dem: ... von mgutt	7	165	10.03.2009, 20:30 El Splatty
Bilder im forum HI wie bekomme ich bilder zum vorstellen von meinem wagen... von ACURA RSX tuner	1	187	10.08.2009, 21:23 Mattes
Wie Bilder ins Forum hochladen? Hi. Bräuchte mal bitte ne genaue beschreibung wie ich bilder reinstellen kann. Ich weiss blöde frage aber dafür sind wir ja alle hier. :yes: Bitte um Rückmeldung Gruss... von HondaFan	8	457	29.03.2007, 15:10 mgutt
Suche ein Bilder aus dem Forum Einer von euch hatte mal ein Bild gemacht wo jemand am auto was mit der Flex bearbeiten tut und die funken fliegen, und hintendran war so ne Goldene wand aufgestellt das das Bild noch besser rüber kommt leider weis ich nicht mehr wo ich das hier gesehen... von Eg8Extrem	2	140	09.08.2011, 21:19 Michaej6
wie lade ich bilder ins forum?? siehe themen... von Roadboy	7	177	10.08.2008, 13:57 Electric
bilder vom treffen am 3.april in hannover mit astra h forum so hier 3 bilder von dern... von Insignia_ST	0	845	03.05.2010, 19:09 Insignia_ST
Bild Dateigröße verkleinern für Signatur Mahlzeit, ich wollte wohl gern dieses Bild in meine Signatur setzen. Da die Bilder für die Signatur maximal 20kb groß sein dürfen, wollte ich nun via Photoshop die Qualiät des Bildes so weit herrunter schrauben, das es kleiner als 20KB ist. Jetzt... von tobnotyze	2	541	22.09.2009, 14:48 SilentDeath

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

Mach mit!

Verwandte Suchbegriffe