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

Pagepeel für die PiratenparteiNeuen Thread eröffnenNeue Antwort erstellenmit js doppelten namen überprüfen
AutorNachricht
Administrator 

Name: Marc
Geschlecht:
Anmeldedatum: 28.08.2004
Beiträge: 50776
Chats: 11159
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!


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

Zu www sibnw.ru/profile php user 809, www sibnw.ru/profile php user 188 und www sibnw.ru/profile php user 586 findest Du weitere passende Themen in der Suche. Alternativ kannst Du auch mal nach www sibnw.ru/profile php user 794, www sibnw.ru/profile php user 385 und www sibnw.ru/profile php user 489 suchen.


Neuen Thread eröffnenNeue Antwort erstellen
Ähnliche BeiträgeRe:
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
129
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
484
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
2.988
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
463
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
261
10.03.2009, 20:30
El Splatty
Klimaautomatik ist mir zu automatisch
erst mal die Grunddaten. CN2 mit Premium-Soundsystem und sprachsteuerung. Das pfänomen ist jetzt in der kalten jahreszeit ärgerlich: temperatur ist auf 20° eingestellt, draußen ist es 15°. ergo sollte die klimasteuerung heizen. also automatik aus,...
von felline
18
1.853
26.10.2006, 15:25
felline
Bilder im forum
HI wie bekomme ich bilder zum vorstellen von meinem wagen...
von K20 Integra
1
254
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
630
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
220
09.08.2011, 21:19
Michaej6
wie lade ich bilder ins forum??
siehe themen...
von Roadboy
7
233
10.08.2008, 13:57
Electric
© 2004 - 2016 www.programmierer-forum.de | Communities | Impressum |