Bild per Javascript verkleinert aufrufen?

[snoodles]

Hallo alle zusammen!

Ich hab folgendes Problem, ich hab ein Bild-Upload Script in PHP geschrieben, welches nun auch wunderbar arbeitet. Jetzt suche ich aber eine möglichkeit die Bilder die ausgegeben werden verkleinert anzuzeigen, also so das alles im Browser gesehen werden kann, quasi von der Auflösung des Betrachters abhängig. Wenn man allerdings auf das Bild klickt soll die volle Größe wieder angeziegt werden und wenn man nochmal drauf klickt soll es wieder komplett im Fenster angepasst sein. Das alles soll aber nur passieren wenn das Bild zu groß ist, wenn es von hause aus in den Browser passt soll nichts damit pasieren.
Ist sowas mit Javascript möglich? Leider hab ich keine Ahnung wie ich damit anfangen soll, oder weiß vielleicht jemand schon ein fertiges Script?

Schönen Gruß,
snoodles

[Peter Gisch]

Jetzt suche ich aber eine möglichkeit die Bilder die ausgegeben werden verkleinert anzuzeigen, also so das alles im Browser gesehen werden kann, quasi von der Auflösung des Betrachters abhängig.

Das geht.
Musst halt mit Hilfe von JS die akutelle Auflösung ermitteln. Hier

Wenn man allerdings auf das Bild klickt soll die volle Größe wieder angeziegt werden und wenn man nochmal drauf klickt soll es wieder komplett im Fenster angepasst sein.

Dann musst du auf das verkleinerte Bild ein "onClick" befehl setzen, dass dann das original Bild aufruft. Und auf dem original Bild nochmal ein "onClick" Befehl setzen.

Das alles soll aber nur passieren wenn das Bild zu groß ist, wenn es von hause aus in den Browser passt soll nichts damit pasieren.

Tja, dann vergleichst du eben, ob die Bildgröße (width, height) größer als die Bildschrimgröße ist.

Ist sowas mit Javascript möglich? Leider hab ich keine Ahnung wie ich damit anfangen soll, oder weiß vielleicht jemand schon ein fertiges Script?

Fertiges Script?
Musst du suchen, aber ich glaube nicht.
Fang erstmal an, die Bildschrim auflösung zu ermitteln.
Dann berechnest du (width, height) wieviele Bilder (bei der aktuellen Auflösung) auf die Seite passen, und teilst den Bildern beim Laden die Größe mit (z.b. document.write("<img src='img/pic1.jpg' width='"+ width +"' height='"+ height+"' />");).

Gruss

[Der Martin]

Hallo,

Musst halt mit Hilfe von JS die akutelle Auflösung ermitteln.

nein, nicht schon wieder!

Wenn schon, dann ermittle die Breite des Elements, in dem das Bild notiert ist.

Fang erstmal an, die Bildschrim auflösung zu ermitteln.

Und dann vergiss sie gleich wieder, denn sie ist für das Vorhaben völlig irrelevant.

So long,
 Martin

[Gunnar Bittersmann]

@@Peter Gisch:

Musst halt mit Hilfe von JS die akutelle Auflösung ermitteln. Hier

Hier klicken ist kein Link-Text

Und auf den Link von dir sollten man besser nicht clicken, weil dort grober Unsinn verbreitet wird.

Fang erstmal an, die Bildschrim auflösung zu ermitteln.

Nein, mit solchem Unsinn wollen wir gar nicht erst anfangen.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@snoodles:

quasi von der Auflösung des Betrachters abhängig.

Der Betrachter aufgelöst??

Egon Olsen war der Auflösung in Säure durch das „Dumme Schwein“ damals* ja knapp entgangen …

Worin willst du die Betrachter deiner Seiten auflösen? Und warum?

Wenn du die Auflösung von deren Monitor meinst – nein, diese ist völlig irrelevant.

Wenn man allerdings auf das Bild klickt soll die volle Größe wieder angeziegt werden und wenn man nochmal drauf klickt soll es wieder komplett im Fenster angepasst sein.

Vorneweg: Das Skalieren von Bildern durch Browser ist allgemein keine gute Idee.

Ja, dein Vorhaben ist möglich. Gib dem Bild initial eine Breite von 100%. Per Click änderst du diese auf "auto" – entweder über das 'http://de.selfhtml.org/javascript/objekte/style.htm@title=style'-Objekt oder (besser wegen Trennung von Präsentation (Layout) und Verhalten) du setzt bzw. entfernst eine Klasse "fullSize", wobei deren Breitenangabe im Stylesheet steht:

img {width: 100%}  
img.fullSize {width: auto}

Live long and prosper,
Gunnar

* „Die Olsenbande fliegt über die Planke“

[snoodles]

Hi,
Ich hab es nun so gemacht und es funktioniert, spricht was dagegen oder ist das so ok?

  
<script type="text/javascript">  
 window.addEvent('domready', function(){  
  var mySlide = new Fx.Slide('slideheader', {mode: 'horizontal'});  
  
  mySlide.hide();  
  mySlide.slideIn();  
  
  var Tips2 = new Tips($$('.Tips2'), {  
   initialize:function(){  
    this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);  
   },  
   onShow: function(toolTip) {  
    this.fx.start(1);  
   },  
   onHide: function(toolTip) {  
    this.fx.start(0);  
   }  
  });  
  
  
 });  
 </script>  

Gruß,
snoodles

[snoodles]

ups, sorry falscher cod :D

das is der richtige:

  
var saveWidth = 0;  
         function skalieren(was)  
  {  
  was = document.getElementById(was);  
  if (navigator.appName=="Netscape")  
          winW = 800;  
  if (navigator.appName=="Opera")  
   winW = 800;  
  if (navigator.appName.indexOf("Microsoft")!=-1)  
   winW = 800;  
  if (was.width>(winW) || saveWidth>(winW))  
  {  
  if (was.width==(winW))  
   was.width=saveWidth;  
  else  
         {  
  saveWidth = was.width;  
  was.style.cursor = "pointer";  
  was.width=(winW);  
  }  
  }  
  }  
  
  function layer_show(dname,show) {  
  document.getElementById(dname).style.display = show;  
  }  
  
  

[Paffendorf]

if (navigator.appName=="Netscape")
    winW = 800;
  if (navigator.appName=="Opera")
   winW = 800;
  if (navigator.appName.indexOf("Microsoft")!=-1)
   winW = 800;

Und was soll das sein?
Bei allen 3 Browsern implemintierst du das selbe.
Daraus könntest du auch eine Zeile machen...
Ist zwar nicht Falsch, ist aber kein schöner Programmierstil.

[Der Martin]

Hallo,

if (navigator.appName=="Netscape")
  if (navigator.appName=="Opera")
  if (navigator.appName.indexOf("Microsoft")!=-1)
Und was soll das sein?
Ist zwar nicht Falsch, ist aber kein schöner Programmierstil.

abgesehen davon, dass es völlig belanglos ist, wie ein Browser zu heißen behauptet. Wenn du (Un-)Fähigkeiten von Browsern berücksichtigen willst, dann frage einen Browser nicht, wie er heißt, sondern ob er die Mthode oder Eigenschaft kennt, die du verwenden willst.

Ciao,
 Martin