Ergebnis 1 bis 8 von 8
  1. #1
    sumsemann ist offline Jungspund
    registriert
    20-09-2009
    Beiträge
    11

    Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    Hallo zusammen,

    ich habe nach langen hin und her ein kleines js geschrieben, welches für ein Forum benutzt werden soll. Wir haben das Problem, das User immer wieder Bilder posten, die 16000px und breiter sind und daher bei Usern mit kleineren Monitoren zu "Darstelluns-Unschönheiten" führen. daher war das Ziel, ein skript zu schreiben, welches die Größe des Bildes ausließt und, falls es die definierte Maximalbreite überschreitet, automatisch auf diese "resized".

    Zusätzlich wollten wir jedoch eine funktion, dass wenn Bilder "geresized" werden, ein onclick event dazugefügt wird, sodass das Bild auf Klick in Originalgröße dargestellt werden kann.

    Da meine js skills ziemlich beschränkt sind, hat es etwas gedauert. Mit folgendem Ergebnis ist nun aber das gewünschte Resultat realisierbar:

    Code:
    function resizeImages() 
    { 
              if (document.images.length > 0)          
              { 
     
    		var maxWidth = 1000;
                   	var imgHeight; 
                   	var imgWidth; 
                   	for (var loop = 0; loop < document.images.length; loop++) 
                   { 
                             imgWidth = document.images[loop].width; 
                             imgHeight = document.images[loop].height; 
     
    if (imgWidth>1000){
    				image = new Image();
                                  	image = document.images[loop]; 
     
    				newImage = image.cloneNode( true )	;
     
    				// Originalgröße speichern 
                                  newImage.origHeight = image.height;
                                	newImage.origWidth = image.width
     
     
                                 	newImage.width = maxWidth ; 
     
                                  //Höhe proportionalisieren 
                                  	imgHeight = imgHeight / (imgWidth/ maxWidth ); 
                                  	newImage.height = imgHeight; 
    				
    				newImage.style.cursor = 'pointer';
     
     
    				if( image.outerHTML )
    				{ 
                    	              	newImage.onclick = "var altHeight; var altWidth;	altHeight = this.height ; altWidth = this.width; this.width = this.origWidth; 	this.height = this.origHeight; this.origWidth = altWidth; this.origHeight = altHeight; 	"; 
    				} else {
                    	              	newImage.onclick = function () { 
    						var altHeight;
    						var altWidth;
    						
    						// Dimensionen in vars speichern
    						altHeight = this.height ;
    						altWidth = this.width;
     
    	
    						// alternative Dimensionen erstellen
    						this.width = this.origWidth; 
    						this.height = this.origHeight; 
     
    						// speichern 
    						this.origWidth = altWidth; 
    						this.origHeight = altHeight; 
    					}; 
    				}
     
     
    				// parent node
    				// & in eine tabelle mit Texthinweis speichern
    				if( parentNode = image.parentNode )
    				{
    					textMessage = document.createTextNode('Click for full size / Kliknete pro plnou velikost');
     
    					elem = document.createElement("td");
    					elem.setAttribute( "align", "center");
    					elem.style.backgroundColor = 'black';
    					elem.style.color = 'white';
    					elem.style.fontWeight = '900';
    					elem.style.fontSize = '8pt';
     
    					elem.appendChild( textMessage );
    					elem.appendChild( document.createElement("br"));
    					elem.appendChild( newImage );
    						
    					
    					tableRow = document.createElement("tr");
    					tableRow.appendChild(elem);
    					
    					TableElem = document.createElement("table");
    					TableElem.setAttribute( "border", "1");
    					TableElem.appendChild( tableRow );
     
    					frag = document.createElement("div");
    					frag.appendChild( TableElem );
     
    					if( image.outerHTML )
    					{
    						image.outerHTML = frag.innerHTML;
    					} else {
    						parentNode.replaceChild( TableElem, image );
    					}
    				}}
     
                   } 
              } 
         } 
    window.onload = resizeImages;
    Hier nun noch ein Live Beispiel:
    http://s253696961.online.de/resize/index3.html

    Einen kleinen Schönheitsfehler gibt es jedoch - und jetzt hoffe ich, dass mir die Versierteren (als ich) vielleicht helfen können!?

    In Opera, Safari und Chrome funktioniert das onclick event nicht - lediglich im FF und IE.

    Ich weiß wohl, dass diese Browser andere Eigenschaften für object benutzen, weiß aber nicht, wie ich dies dementsprechend berücksichtigen / ändern muss.

    Irgendwelche Vorschläge?

    Vielen dank im Vorraus und beste Grüße,
    sumsemann

  2. #2
    Avatar von Albu
    Albu ist offline Foren-Gott
    registriert
    04-07-2001
    Beiträge
    13.501

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    Also eine gescheite Lösung wäre eine serverseitige. Da Du ein Forum hast und die Leute irgendwas hochladen können, unterstelle ich das Vorhandensein einer serverseitigen Logik. Dieser dürfte es leicht fallen die Bildabmessungen auszulesen und gfs. das Bild zu beschneiden, oder entsprechenden HTML Code zu generieren. Dies kann sogar soweit gehen, dass ein Link um das verkleinerte Bild gelegt wird, welcher die Originalgröße in einem neuen Fenster öffnet.
    Ein solches Skript könnte auch die Bildgrößen bis zu einer Maximalgröße unverändert darstellen, und erst ab einem oder mehreren Kriterien (z.B. wenn die Bilder eine bestimmte Dateigröße überschreiten) eine Beschneidung mit Anklickfunktion einbauen.
    Aber eine Javascript-Lösung würde mir da nicht in den Sinn kommen, zum das Bild ja erstmal in groß geladen wird, bevor JS überhaupt aktiv werden kann.
    1. Get people to play Space Taxi
    2. Sell real estates on neptun
    3. Profit!

    IE is not a browser, it is a scream.


    Outside of a dog, a book is man's best friend. Inside of a dog, it's too dark to read.

  3. #3
    sumsemann ist offline Jungspund
    registriert
    20-09-2009
    Beiträge
    11

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    Zitat Zitat von Albu Beitrag anzeigen
    Also eine gescheite Lösung wäre eine serverseitige. Da Du ein Forum hast und die Leute irgendwas hochladen können, unterstelle ich das Vorhandensein einer serverseitigen Logik. Dieser dürfte es leicht fallen die Bildabmessungen auszulesen und gfs. das Bild zu beschneiden, oder entsprechenden HTML Code zu generieren. Dies kann sogar soweit gehen, dass ein Link um das verkleinerte Bild gelegt wird, welcher die Originalgröße in einem neuen Fenster öffnet.
    Ein solches Skript könnte auch die Bildgrößen bis zu einer Maximalgröße unverändert darstellen, und erst ab einem oder mehreren Kriterien (z.B. wenn die Bilder eine bestimmte Dateigröße überschreiten) eine Beschneidung mit Anklickfunktion einbauen.
    Aber eine Javascript-Lösung würde mir da nicht in den Sinn kommen, zum das Bild ja erstmal in groß geladen wird, bevor JS überhaupt aktiv werden kann.
    danke für deinen tip, aber das wäre natürlich zu einfach..

    nein, ehrlich. das wäre natürlich die vorgehensweise, wenn nicht folgendes problem gegeben wäre.

    wir haben ein eigenes image host, bei dem genau das gemacht wird. wir erlauben aber auch tinypic.com zu nutzen. wir haben über 100.000 mitglieder und viele davon posten ihre links in diversen foren. auf die bilder von tinypic haben wir aber keinen physikalischen einfluss und können daher nur "on-the-fly" änderungen selber realisieren. daher die oben genannte lösung, die ja im ie und ff prima funktioniert! auch opera, safari und chrome ziegen die bilder in der gewünschten größe an. nur funktioniert hier eben das onclick event nicht!

    und jetzt bitte nicht den tip geben, tinypic doch zu verbieten.

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    Was soll das?
    Code:
    				if( image.outerHTML )
    				{
                    	              	newImage.onclick = "var ...
    Den Code mit der Funktionsrefernez sollte jeder Browser verstehen.

  5. #5
    sumsemann ist offline Jungspund
    registriert
    20-09-2009
    Beiträge
    11

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    danke. habe aber jetzt eine wesentlich elegantere lösung gefunden, die in allen Browsern funktioniert.

    Für diejenigen, die es interessiert, hier der code:

    Code:
    var vbimgResizedMsg = "Resized image! Click for original size!";
    var vbimgShrinkedMsg = "100% size image! Click to shrink again!";
    var vbimgClassResized = "vbimgResized";
    var vbimgClassRealSize = "vbimgRealSize";
    var vbimgMaxWidth = 1000;
    
    function vbResizeImages() {
    if (document.images.length) {
    	var Imgs = document.images;
    	for (var i = 0 ; i < Imgs.length ; i++)
    		if (Imgs[i].width > vbimgMaxWidth) {
    			Imgs[i].title = vbimgResizedMsg;
    			Imgs[i].onclick = vbRestoreImage;
    		        Imgs[i].id = Imgs[i].width;
            		Imgs[i].width = vbimgMaxWidth;
    		        Imgs[i].className = vbimgClassResized;
          }
       }
    }
    
    function vbRestoreImage(e) {
    if (window.event)
    	obj = window.event.srcElement;
    else
    	obj = e.target;
    
    obj.title = vbimgShrinkedMsg;
    obj.onclick = vbShrinkImage;
    obj.width = obj.id;
    obj.id = vbimgMaxWidth;
    obj.className = vbimgClassRealSize;
    }
    
    function vbShrinkImage(e) {
    if (window.event)
    	obj = window.event.srcElement;
    else
    	obj = e.target;
    
    obj.title = vbimgResizedMsg;
    obj.onclick = vbRestoreImage;
    obj.id = obj.width;
    obj.width = vbimgMaxWidth;
    obj.className = vbimgClassResized;
    }

  6. #6
    mgutt ist offline Jungspund
    registriert
    10-03-2005
    Beiträge
    19

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    Ich gehe davon aus, dass man das bei body onload einsetzt. Im Grunde nicht verkehrt, denn ich kenne sonst nur die Lösung mit onload auf dem img und das ist schlecht, weil man bei erneuter Ansicht des Bildes (da es bereits im Cache ist) kein onload mehr auslöst. Aktuell behelfe ich mich daher mit onmouseover. Siehe hier z.B.:
    http://www.maxrev.de/honda-civic-eg-ej-92-95-t661.htm

    1.)
    Nun sehe ich Deinen Code und hätte erstmal einen Verbesserungsvorschlag:
    Code:
    var vbimgMaxWidth = 1000;
    Sollte eher sowas sein:
    Code:
    var vbimgMaxWidth = 0;
    try {
    	vbimgMaxWidth = window.innerWidth;
    }
    catch (e) {}
    if (!vbimgMaxWidth) {
    	vbimgMaxWidth = document.body.offsetWidth;
    }
    Auf die Art wird bei kleinen Auflösungen z.B. bei mobilen Geräten ebenfalls runterskaliert und man hat nicht einfach nur einen starren Wert.

    2.)
    Dann frage ich mich aber, ob es wirklich so schlau ist jedes Bild auf der Seite runterzusizen bzw. abzuarbeiten. Wirklich schnell scheint mir das Script nicht zu sein. Es wird ja mit jedem Smilie auf der Seite langsamer.

    Was meint ihr?

    3.)
    Mir ist aufgefallen, dass wenn man nur die width eines Bildes ändert, dass im Quelltext eine feste height-Angabe hat, sich dann die height nicht ändert. D.h. das Bild wird unförmig. Das kann man verhindern in dem man zuerst einmal die Ratio ermittelt, mit der das Bild verkleinert wird, dann die Höhe speichert und nach Änderung der Breite die Höhe des Bildes mit der zuvor gespeicherten vergleicht. Sind die Höhen identisch, dann muss die Höhe noch mal manuell gesetzt werden.

    4.)
    Man darf nicht vergessen, dass diese Funktion wirklich alle Bilder verkleinert. Also z.B. auch Kopfgrafiken. Das könnte man umgehen, in dem man den Startparameter nicht auf 0 sondern auf 5 oder so stellt (je nachdem wie viele Bilder kommen, bevor der Content anfängt). Das könnte sich sogar positiv auf die Performance auswirken (wenn auch nur maginal).

    5.)
    Zuletzt möchte ich anmerken, das Bilder durchaus verlinkt sein könnten. In dem Fall löst ein Klick auf das Bild das resizen aus und parallel öffnet sich das Fenster. Schick ist anders. Vielleicht wäre es besser, wenn man ein Icon/Menü über dem Bild platziert. Ist allerdings auch eine Performancefrage.
    Geändert von mgutt (04-02-2010 um 17:40 Uhr)

  7. #7
    mgutt ist offline Jungspund
    registriert
    10-03-2005
    Beiträge
    19

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    1.) Ergänzung:
    Code:
    // obtain window size
    var ws = 0
    function ows() {
    	ws = window.innerWidth ? window.innerWidth : document.body && document.body.offsetWidth ? document.body.offsetWidth : screen.width;
    }
    Das sollte in jedem Browser funktionieren.

    5.) Dazu fällt mir aktuell keine Lösung ein. Das beste wäre, wenn man irgendwie prüfen könnte, ob ein Bild bereits verlinkt ist und in dem Fall kein resizen vornimmt. Dann braucht man sich auch nichts mit einem Layer oder ähnlichem einfallen lassen.

    6.) Ich habe mal ein wenig mit body.onresize rumgespielt, damit die Bildergröße auch bei Änderung der Fenstergröße geändert wird. Allerdings war das ziemlich aufwendig, da man onresize drosseln musste und zusätzlich auch wieder größer machen musste usw. Am Ende hats funktioniert, aber im Grunde ist der Effekt nutzlos, weil kaum ein Nutzer ein Fenster erst wieder klein macht und dann wieder groß und beim nächsten Klick würde es ja eh wieder geresized. Und mir kam das auch langsam vor. Also was solls.

    7.) Scriptausführung onload oder </body>. Nun das habe ich auch getestet und beim mobilen Geräten viel auf, dass die Ausführung bei </body> auf Grund der Ladezeit dazu führte, dass viele Bilder gar nicht verkleinert wurden (weil images[x].width noch nicht verfügbar war). Also bin ich bei onload hängen geblieben. Ist zwar nicht schnell, wenn man viele Bilder hat, aber besser gehts wohl nicht.


    Die aktuelle Variante im Einsatz kann hier getestet werden:
    http://www.maxrev.de/honda-civic-eg-ej-92-95-t661.htm

    Einfach das Browserfenster verkleinern und die Seite aktualisieren. Da sieht man inbesondere das Problem bei den verlinkten Bildern. Auf Seite 3 sind ein paar eingebettete Bilder ohne Verlinkung. Da läufts perfekt.

  8. #8
    mgutt ist offline Jungspund
    registriert
    10-03-2005
    Beiträge
    19

    AW: Image resize script mit onclick event - Probleme mit Opera, Safari & Chrome

    So 5.) konnte ich mit parentNode lösen und das Script ist damit fertig:
    http://www.programmierer-forum.de/zu...tc-t131560.htm

    Bei einer Verlinkung habe ich mich gegen den onclick-Event entschlossen, da ich davon ausgehe, dass die Verlinkung zum großen Bild führt. Zusätzlich habe ich per css den Mauszeiger modifiziert und kann damit denke ich auf den title verzichten.

    Wer will kann über onclick z.B. auch ein neues Fenster öffnen lassen und auf das resizen verzichten. Nur so als Idee in den Raum geworfen

Ähnliche Themen

  1. Bilderbuch zum Umblättern Firefox, Opera...
    Von Kafka im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 18-04-2009, 14:40
  2. Javascript, Bildanzeige (dynamisch)
    Von Philip31 im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 04-03-2009, 17:12
  3. Komm nicht weiter RECHNER
    Von sinto4minden im Forum JavaScript
    Antworten: 22
    Letzter Beitrag: 10-09-2008, 20:31
  4. Script läuft auf Safari nicht
    Von co007 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 25-06-2007, 14:56
  5. Antworten: 6
    Letzter Beitrag: 22-01-2007, 10:24

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •