Übergroße Bilder automatisch verkleinern

  • Seite 1 von 3
24.01.2008 10:01
avatar  Riddick
#1 Übergroße Bilder automatisch verkleinern
avatar
User

Neulich hat eine Userin bei uns ein Wahnsinns Bild Eingestellt... Es hat die Ansicht im Thread so zerhauen, dass man unten einen Scrollbalken bekommen hat, den auch benutzen mußte um zu antworten. :O(
Nach einiger Suche habe ich ein Script entdeckt, ganz leicht geändert, ausprobiert und es funzt :O)(zumindest bei FireFox... Die anderen teste ich noch.

Man setze es in die Obere Leiste zwischen <haed> und </haed>

<script type="text/javascript">
// Übergroße Grafiken skalieren, Version 1.1
// (c) by Nash 2005
// http://www.nashweb.de | nashbridges12@hotmail.com
// Lizenz zur Nutzung und Weiterverbreitung solange dieses copyright unverändert ist

function resizePics() {

var klasse = "tms2";
var max_breite = 600;
var vorgegebene_breite = 600;

if(document.getElementsByTagName) {

var bilder = document.getElementsByTagName("img");

for(i=0; i<bilder.length; i++) {

var breite = bilder[i].width;
//var hoehe = bilder[i].height;

if(bilder[i].parentNode.parentNode.className == klasse && breite > max_breite) {
bilder[i].style.width = vorgegebene_breite + "px";
bilder[i].title = "Auf das Bild klicken für volle Größe.";
bilder[i].onclick = function() {
var fenster = window.open(this.src, "", "width=" + screen.width + ",height=" + screen.height + ",scrollbars=yes");
}
}

}

}

}

window.onload = resizePics;
</script>


Wie man die maximale Größe einstellt, erklärt sich von selbst. Wenn man das Bild anclickt, öffnet sich ein neues Fenster mit dem Bild in Originalgröße.
Hier wird nur die max-Breite definiert. Die Proportionen bleiben erhalten.

Gruß Kathi







 Antworten

 Beitrag melden
24.01.2008 11:15
#2 RE: Übergroße Bilder automatisch verkleinern
avatar
User

bei mir funzt das nicht :(

24.01.2008 11:53 (zuletzt bearbeitet: 24.01.2008 11:55)
avatar  Riddick
#3 RE: Übergroße Bilder automatisch verkleinern
avatar
User
Zitat von Elbkrümel
bei mir funzt das nicht :(


<style type="text/css">
<script type="text/javascript">
// Übergroße Grafiken skalieren, Version 1.1
// (c) by Nash 2005
// http://www.nashweb.de | nashbridges12@hotmail.com
// Lizenz zur Nutzung und Weiterverbreitung solange dieses copyright unverändert ist
function resizePics() {
var klasse = "tms2";
var max_breite = 500;
var vorgegebene_breite = 500;
if(document.getElementsByTagName) {
var bilder = document.getElementsByTagName("img");
for(i=0; i<bilder.length; i++) {
var breite = bilder[i].width;
//var hoehe = bilder[i].height;
if(bilder[i].parentNode.parentNode.className == klasse && breite > max_breite) {
bilder[i].style.width = vorgegebene_breite + "px";
bilder[i].title = "Auf das Bild klicken für volle Größe.";
bilder[i].onclick = function() {
var fenster = window.open(this.src, "", "width=" + screen.width + ",height=" + screen.height + ",scrollbars=yes");
}
}
}
}
}
window.onload = resizePics;
</script>

.admin {
display: none;
}

</style>


Das rot markierte muß nach oben hinter das grün markierte...

Du hast es zwischn einen schon vorhandesne code geschrieben...





 Antworten

 Beitrag melden
24.01.2008 11:55
avatar  Riddick
#4 RE: Übergroße Bilder automatisch verkleinern
avatar
User

Bei IE und Opera funzt es auch.






 Antworten

 Beitrag melden
24.01.2008 16:26
#5 RE: Übergroße Bilder automatisch verkleinern
avatar
User

huch, hab das wohl übersehen #)

Danke, jetzt geht es ...

02.02.2008 21:56
avatar  Carsten
#6 RE: Übergroße Bilder automatisch verkleinern
Ca
User

Leider wird aber nicht die Bilder im Antwortfenster verkleiner, oder habe ich da was übersehen?


 Antworten

 Beitrag melden
03.02.2008 11:19 (zuletzt bearbeitet: 03.02.2008 11:19)
avatar  green
#7 RE: Übergroße Bilder automatisch verkleinern
avatar
User
..gibt's vielleicht noch einen Möglichkeit, etwa das Bannerbild des Forums davon auszuschließen?

 Antworten

 Beitrag melden
03.02.2008 16:10
avatar  Riddick
#8 RE: Übergroße Bilder automatisch verkleinern
avatar
User

Zitat von Carsten
Leider wird aber nicht die Bilder im Antwortfenster verkleiner, oder habe ich da was übersehen?

Neee, die sind leider nicht dabei...






 Antworten

 Beitrag melden
03.02.2008 16:10
#9 RE: Übergroße Bilder automatisch verkleinern
avatar
User

Vor kurzem hat mir ein User in meinem Forum auch 'ne Frage zu dem Skript gestellt, weil es nicht ging. Daraufhin hab' ich mich mal selbst an's Werk gemacht.

Normalerweise kann man das Skript nur nach einer Registrierung bei mir einsehen, aber ich will mal nicht so sein. ;-)
zugehöriger Beitrag (erst nach Login aufrufbar)


Besonderheiten:
- Beim überfahren mit der Maus wird eine das Klick-Symbol angezeigt.
- Das Skript an sich muss nicht verändert werden, alle Anpassungen können am Anfang vorgenommen werden.
- Es können eine maximale Breite und eine maximale Höhe festgelegt werden.
- Es kann eine Ausnahme definiert werden, damit das Skript nicht auf den eigenen Banner o.ä. angewendet wird.
- Das Bild in Originalgröße offnet sich bei Klick in einem neuen Fenster, alternativ kann es direkt dynamisch in der Seite vergrößert bzw. verkleinert werden.
- Umlaute in der Info beim Überfahren werden richtig dargestellt.

<script language="javascript" type="text/javascript">
// Bilder automatisch verkleinern
function resizePics() {

// Alle Angaben in Pixeln:
// -----------------------------------------------------------------------------------------------------------------------------------------

var pict_width_max = 800; // Maximale Bilderbreite
var pict_width_after = 800; // Bilderbreite nach Größenänderung

var pict_height_max = 400; // Maximale Bilderhöhe
var pict_height_after = 400; // Bilderhöhe nach Größenänderung

// Ausnahme, z.B. ein Banner, auf den das Skript nicht angewendet werden soll
var resize_pic_ausnahme = 'http://www.bilder-hochladen.net/files/585t-b.png';

var resize_pics_new_window = false; // true öffnet das Bild in einem neuen Fenster, false vergrößert oder verkleinert dynamisch

// Keine weiteren Angaben benötigt.
// -----------------------------------------------------------------------------------------------------------------------------------------

if(document.getElementsByTagName) {
var resize_pics_nr = document.getElementsByTagName("img");

for(i_pic_nr=0; i_pic_nr<resize_pics_nr.length; i_pic_nr++) {
var pict_width_resize = resize_pics_nr[i_pic_nr].width;
var pict_height_resize = resize_pics_nr[i_pic_nr].height;

if (pict_width_resize > pict_width_max) {
if (resize_pics_nr[i_pic_nr].src != resize_pic_ausnahme) {
resize_pics_nr[i_pic_nr].style.width = pict_width_after + 'px';
resize_pics_nr[i_pic_nr].title = unescape("Auf das Bild klicken f%FCr volle Gr%F6%DFe.");
onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
resize_pics_nr[i_pic_nr].onclick = function() {
if (resize_pics_new_window == true) {
var fenster = window.open(this.src);
}
else {
if (this.style.width != '') {
this.style.width = '';
}
else {
this.style.width = pict_width_after + 'px';
}
}
}
}
}
else if (pict_height_resize > pict_height_max) {
if (resize_pics_nr[i_pic_nr].src != resize_pic_ausnahme) {
resize_pics_nr[i_pic_nr].style.height = pict_height_after + 'px';
resize_pics_nr[i_pic_nr].title = unescape("Auf das Bild klicken f%FCr volle Gr%F6%DFe.");
onmouseover = resize_pics_nr[i_pic_nr].style.cursor= 'pointer';
resize_pics_nr[i_pic_nr].onclick = function() {
if (resize_pics_new_window == true) {
var fenster = window.open(this.src);
}
else {
if (this.style.height != '') {
this.style.height = '';
}
else {
this.style.height = pict_height_after + 'px';
}
}
}
}
}

}
}

}
</script>



Viel Spaß damit!


 Antworten

 Beitrag melden
03.02.2008 16:12
avatar  Riddick
#10 RE: Übergroße Bilder automatisch verkleinern
avatar
User

Zitat von green
..gibt's vielleicht noch einen Möglichkeit, etwa das Bannerbild des Forums davon auszuschließen?


Ich versuch mal... Allerdings habe ich es bei mir eingebaut... Betroffen sind nur die Bilder in den Bereichen mit der jeweiligen class

Wenn du dem Banner eine andere class verpasst, hat sich das Prob von allein gelöst....






 Antworten

 Beitrag melden
03.02.2008 16:15
avatar  Riddick
#11 RE: Übergroße Bilder automatisch verkleinern
avatar
User

@WolverineX: Danke dir für die "Herausgabe". Ich werd es gleich mal testen.






 Antworten

 Beitrag melden
03.02.2008 16:16 (zuletzt bearbeitet: 03.02.2008 16:17)
#12 RE: Übergroße Bilder automatisch verkleinern
avatar
User
In Antwort auf:
- Es kann eine Ausnahme definiert werden, damit das Skript nicht auf den eigenen Banner o.ä. angewendet wird.


Siehe in meinem vorigen Beitrag. Damit werden alle Bilder verkleinert, auch beim Antworten.
Allerdings kann auch ein Bild ausgenommen werden, wie z.B. der Banner.

Edit: Jetzt geht's drunter und drüber. :-D
Ich müsste wohl schneller schreiben...

 Antworten

 Beitrag melden
03.02.2008 16:21
avatar  Carsten
#13 RE: Übergroße Bilder automatisch verkleinern
Ca
User

Zitat von Riddick
Zitat von Carsten
Leider wird aber nicht die Bilder im Antwortfenster verkleiner, oder habe ich da was übersehen?

Neee, die sind leider nicht dabei...

Also gibt es garkeine Möglichkeit wie man das noch hinbekommen kann?


 Antworten

 Beitrag melden
03.02.2008 16:30
avatar  Bengt
#14 RE: Übergroße Bilder automatisch verkleinern
avatar
User

wie wäre es, wenn man auf den ganzen javascript schnickschnack vezichtet?

ein bild soll den beitrag nicht sprengen --> in forumcodes einfach ein pre-tag um den bilder code
legen und die größe des pre's an eine bestimmte größe anpassen.
so wird der beitrag nicht zerhackt

und wenn nun einer sagt, ja da muss man aber im beitrag scrollen um das bild vollständig zu sehen --> einfach noch a-tag drum^^, so kann der user aufs bild klcken und sieht es vollständig.

klingt komisch, geht aber.



mit freundlichen Grüßen, Bengt


 Antworten

 Beitrag melden
03.02.2008 16:32 (zuletzt bearbeitet: 03.02.2008 16:33)
#15 RE: Übergroße Bilder automatisch verkleinern
avatar
User
Zitat von Carsten
Zitat von Riddick
Zitat von Carsten
Leider wird aber nicht die Bilder im Antwortfenster verkleiner, oder habe ich da was übersehen?

Neee, die sind leider nicht dabei...

Also gibt es garkeine Möglichkeit wie man das noch hinbekommen kann?


Das müsste nun auch funktionieren, habe es selbst getestet!


Und ich werde das Skript weiterhin benutzen. :-D

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!