» 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:

// 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:

<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:

.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 Thread "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:

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...

Autor	Nachricht
mgutt Administrator Name: Marc Geschlecht: Anmeldedatum: 28.08.2004 Beiträge: 52422 Wohnort: Lohmar Meine eBay-Auktionen:	05.02.2010, 21:27 zitieren 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: // 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: `<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: `.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! Gefällt mir Teilen twittern
▲	pn email

programmierer-forum.de Gast	05.02.2010, 21:27 zitieren Mach mit! Wenn Dir die Beiträge zum Thread "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: 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: √	Letzter Beitrag
Recht: Forum & Blog demnächst mit Verfallsdatum Nachdem die EU die stark umstrittene Cookie Richtlinie umgesetzt hat und in Deutschland die Umsetzung dessen ansteht, gibt es noch viele weitere Änderungen beim Datenschutz, die erschreckende Ausmaße annehmen. Hast Du schon mal über Google nach einer... von mgutt	1 311	04.06.2012, 18:03 mgutt
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 627	01.01.2012, 15:08 mgutt
[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... von mgutt	36 3.316	20.07.2009, 20:01 Mattes
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 687	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 408	10.03.2009, 20:30 El Splatty
Bilder im forum HI wie bekomme ich bilder zum vorstellen von meinem wagen... von K20 Integra	1 315	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 732	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 303	09.08.2011, 21:19 Michaej6
wie lade ich bilder ins forum?? siehe themen... von Roadboy	7 309	10.08.2008, 13:57 Electric
Ich komm mal aus m Sol Forum rüber...;-)Aufbau??Bilder page2 Hallo Freunde...nachdem ich letzten Freitag ein unschönes Erlebnis im eg4 meines Kumpels hatte als ihm bei 150die Haube aufging...Kauf ich ihm die Woche die Karre ab...Haube und Scheibe sind Schott...der Rest zeigt sich noch.evebtuell mach ich ein aus 2... von kyngamok	36 1.243	11.03.2012, 20:13 kyngamok