#1 5. April 2009 Bei Ausgabe Bild automatisch verkleinern Hey, ich stehe vor folgendem Problem und finde leider über Google nur bedingt Hilfe (kann einfach nicht suchen ^^): Text und Bilder werden durch eine Variable ausgelesen. Ähnlich wie in Foren möchte ich jetzt, wenn ein Bild zu breit ist, dass das Bild auf eine bestimmte Breite skaliert wird. Bilder werden übrigens mit einem [ img ]-Tag in brauchbaren HTML-Code umgewandelt. Bewertung ist sicher! MfG, L33do + Multi-Zitat Zitieren
#2 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern PHP: //breite: $maxwidth = 200 ; list( $width , $height ) = getimagesize ( $img ); $multiplikator = $height / $width ; $height = $maxwidth * $multiplikator ;echo '<img src="' . $img . '" width=' . $maxwidth . ' height=' . $height . ' />' ; Nicht getestet... Und geht sicher noch iwie eleganter.. MfG + Multi-Zitat Zitieren
#3 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Mach es doch mit JavaScript Ich habe mir mal ein kleines Script gebastelt für eine Gallerie, das verkleinert die Bilder automatisch, wenn sie entweder zu breit oder zu hoch sind, beim Klick auf das Bild wird es in Originalgröße angezeigt :] Code: <script type="text/javascript"> var saveWidth = 0; var saveHeight = 0; function scaleImg(what) { what = document.getElementById(what); if (navigator.appName=="Netscape") winW = window.innerWidth; if (navigator.appName.indexOf("Microsoft")!=-1) winW = document.body.offsetWidth; if (what.width>(1200) || saveWidth>(1200)) { if (what.width==(1200)) what.width=saveWidth; else { saveWidth = what.width; what.style.cursor = "pointer"; what.width=(1200); } } else if (what.height>(790) || saveHeight>(790)) { if (what.height==(790)) what.height=saveHeight; else { saveHeight = what.height; what.style.cursor = "pointer"; what.height=(790); } } } </script> Code: <img src="URL" id="thepic" onclick="scaleImg('thepic')" onload="scaleImg('thepic')" /> + Multi-Zitat Zitieren
#4 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Danke an p0w3rn4t0r und Erazor, habe mich für die Javascript-Lösung entschieden, da das PHP-Script wieder ein Bild als Quelle voraussetzt. Bewertungen sind draußen! @p0w3rn4t0r: Habe das onclick aus dem Bild ausgebaut, da es sonst wieder das Design sprengt, wenn es vergrößert wird. Gibt es auch eine Möglichkeit, das irgendwie anders zu vergrößern? Habe ein Lightbox-Script standardmäßig eingebaut, nur wie soll ich das genau verwenden, da es ja nur dann angezeigt werden soll, wenn das Bild verkleinert wird? MfG, L33do + Multi-Zitat Zitieren
#5 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Bin bei Lightbox nicht so ganz fit, aber das funktioniert doch über eine Klasse, die dem Bild zugewiesen ist, oder? Wenn das der Fall ist, würde ich es einfach so machen, dass wenn das Bild verkleinert wird (sind ja ein paar ifs im JS-Code), dem Image die passende Klasse für die Lightbox zugewiesen/hinzugefügt wird. Verstehste, was ich meine? + Multi-Zitat Zitieren
#6 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Lightbox funktioniert so, dass du im href-Tag ein rel="lightbox" machst. Nur müsste halt dann per JS zum Bild ein href-Tag hinzugefügt werden, da liegt der Hacken ... + Multi-Zitat Zitieren
#7 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Wo ist das Problem.. Das JScript von p0w3rn4t0r verändert ja nur die Größe des Bildes, in dem onload="scaleImg('thepic') steht... Um es Lightbox kompatibel zu machen einfach so: HTML: <a href="URL" rel="lightbox"> <img src="URL" id="thepic" onclick="scaleImg('thepic')" onload="scaleImg('thepic')" /> </a> sprich so: HTML: <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript"> var saveWidth = 0; var saveHeight = 0; function scaleImg(what) { what = document.getElementById(what); if (navigator.appName=="Netscape") winW = window.innerWidth; if (navigator.appName.indexOf("Microsoft")!=-1) winW = document.body.offsetWidth; if (what.width>(1200) || saveWidth>(1200)) { if (what.width==(1200)) what.width=saveWidth; else { saveWidth = what.width; what.style.cursor = "pointer"; what.width=(1200); } } else if (what.height>(790) || saveHeight>(790)) { if (what.height==(790)) what.height=saveHeight; else { saveHeight = what.height; what.style.cursor = "pointer"; what.height=(790); } } } </script> <a href="test.jpg" rel="lightbox"> <img src="test.jpg" id="thepic" onclick="scaleImg('thepic')" onload="scaleImg('thepic')" /> </a> oder du nimmst: http://jquery.com/demo/thickbox/ MfG + Multi-Zitat Zitieren
#8 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Darauf wäre ich selber auch gekommen, nur soll das href-Tag nur dann erscheinen, sobald das Bild verkleinert wird, da liegt (bei mir) das Problem ... + Multi-Zitat Zitieren
#9 5. April 2009 AW: Bei Ausgabe Bild automatisch verkleinern Wenn du eine Bibliothek wie JQuery benutzt, geht das einfach mit before und after, dann kann man aber das gesamte Script einfacher ausdrücken Wenn du es damit machen willst, schau dir mal VisualJQuery an, kannst dort die genannten Befehle nachschlagen. + Multi-Zitat Zitieren