[ erweiterte Suche ]
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: 30241
Chats: 11081
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 www icq
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

bilder automatisch verkleinern, javascript größe bild, mauszeiger verkleinern, javascript bilder verkleinern, javascript bild verkleinern, alle bilder verkleinern javascript, bilder mit Javascript verkleinern, javascript automatisch Bild fenster, skrip windows bilder verkleinern, bilder verkleinern, html bild automatisch verkleinern, forum bilder automatisch verkleinern, großes bild forum, bilder automatisch verkleinern forum, css bild automatisch verkleinern, bilder die ich bei css reinstellen kann, bilder automatisch verkleinern html, hintergrundbilde der größe des browser fensters anpassen, css grafik automatisch verkleinern, foren bilderupload mit verkleinerung
Nach oben
Seite 1 von 1 [1 Beitrag]
Neues Thema eröffnenNeue Antwort erstellen

Ähnliche BeiträgeAutorAntwortenAufrufeLetzter Beitrag
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...
mgutt536723.03.2007, 22:30
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...
Seite: 2, 3, 4 ]
mgutt36181020.07.2009, 20:01
Mattes
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: ...
mgutt713410.03.2009, 20:30
El Splatty
Bilder im forum 
HI wie bekomme ich bilder zum vorstellen von meinem wagen...
ACURA RSX tuner19910.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...
*HondaFan*835929.03.2007, 15:10
mgutt
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...
tobnotyze226322.09.2009, 14:48
SilentDeath
wie lade ich bilder ins forum?? 
siehe themen...
Roadboy711510.08.2008, 13:57
Electric
Kann man normale videos aufm pc verkleinern? 
hey leute,hab jetz ein problem. will einen film auf 1 oder 2 800mb cds aber wie bekomme ich diesen film geteilt ? wichtig.bitte meldet...
Rider4Life722329.07.2006, 13:30
KleenerKrasser
bilder vom treffen am 3.april in hannover mit astra h forum 
so hier 3 bilder von dern...
Insignia_ST027703.05.2010, 19:09
Insignia_ST
EG Fensterheber automatisch 
Hi, mich nervt es unendlich das der Beifahrerfensterheber nicht automatisch hoch/runter geht, so wie der auf der Fahrerseite. Wie kann ich das ändern???...
FaHrStUhL453818.09.2005, 20:42
Sam_23
© 2004 - 2010 www.programmierer-forum.de | Communities | Impressum