[ erweiterte Suche ]

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

Pagepeel für die PiratenparteiNeues Thema eröffnenNeue Antwort erstellenDas Thema einem Freund empfehlenDas Thema druckenmit js doppelten namen überprüfen
Seite 1 von 1 [1 Beitrag]
AutorNachricht
Administrator 


Name: Marc
Geschlecht:
Anmeldedatum: 28.08.2004
Beiträge: 39614
Chats: 11125
Wohnort: Hennef


Meine eBay-Auktionen:
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!
Nach obenprofil pn email
Gast 

05.02.2010, 21:27


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

Verwandte Suchbegriffe

javascript bilder verkleinern, html bilder automatisch skalieren, bilder automatisch verkleinern, html bild automatisch verkleinern, javascript bild verkleinern, bilder automatisch verkleinern html, css bild automatisch verkleinern, css bilder automatisch verkleinern, javascript größe bild, windows bilder automatisch verkleinern, bild verkleinern javascript, bild automatisch verkleinern html, mauszeiger verkleinern, html bilder automatisch verkleinern, javascript bilder automatisch verkleinern, bild verkleinern, forum bilder automatisch verkleinern, bilder automatisch verkleinern css, html img automatisch verkleinern, bilder automatisch skalieren html
Nach oben
Seite 1 von 1 [1 Beitrag]
Neues Thema eröffnenNeue Antwort erstellen
Ähnliche BeiträgeRe:HitsLetzter 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
36236920.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
38301.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
539223.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
716510.03.2009, 20:30
El Splatty
Bilder im forum
HI wie bekomme ich bilder zum vorstellen von meinem wagen...
von ACURA RSX tuner
118710.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*
845729.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
214009.08.2011, 21:19
Michaej6
wie lade ich bilder ins forum??
siehe themen...
von Roadboy
717710.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
084503.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
254122.09.2009, 14:48
SilentDeath
© 2004 - 2012 www.programmierer-forum.de (srv02) | Communities | Impressum