Florians Forum » Webmaster » Ideen für Skripte und sonstige Quellcodes » Bilderverkleinerungssript
#1 Bilderverkleinerungssript von frank23
29.01.2008 11:11
Hallo,
folgendes tolle Sript <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 = "ifo1";
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>
habe ich aus dem HPM Forum von Riddick
http://www.hpm-support.de/t515418f117691...erkleinern.html
Setze ich dieses Sript in ein original Template ein, funktioniert es ohne Probleme. Setze ich es in mein Template ein ist die Funktion nicht vorhanden.
Hast du eine Idee, woran dies liegen könnte?
#2 RE: Bilderverkleinerungssript von florian-zier
29.01.2008 17:01
Spontan fallen mir nur ein paar Dinge ein.
- Ist das Skript auch wirklich zwischen den Head-Tags positioniert?
- Im Skript steht am Ende window.onload = resizePics;. Das sorgt dafür, dass es auch beim Seitenaufbau geladen wird.
Alternativ würde ich es mal per Onload im Body-TagEine Anleitung inkl. Alternative gibt es hier. versuchen. Sollte zwar nicht die Ursache sein, könnte aber.
- Im Skript von Riddick ist var klasse = "tms2"; statt ifo1 angegeben. Das Skript geht zu dem zweiten übergeordneten Tag von dem Bild aus (parentNode.parentNode) und liest dort den Klassennamen (className) aus. Evtl. ist dort nur die Klasse tms2 vorhanden, wenn ifo1 fehlt, könnte ein Fehler die Folge sein. Eine Bedingung
Kleine Fragen:
Warum funktioniert es mit der anderen Klasse im originalen Template...? Warum wird überhaupt auf eine Klasse geprüft, und nicht gleich auf die Breite?
Und warum weiß das Skript, dass es genau zwei Tags nach oben wandern muss, und nicht drei, vier...?
- Eine, bei vielen eingebauten Skripten oft vorkommende Ursache, könnten die Variablen sein.
Vor allem der Zähler "i"
Er wird oft benutzt, z.B. auch in meinem Slideshow-Skript. Es muss immer gewährleistet sein, dass die Variablen in allen Skripten, die gleichzeitig ausgeführt werden, nur jeweils in einem Skript vorkommen.
Der Zähler "i" sollte also umbenannt werden, oder zumindest nicht mehr in anderen Skripten vorkommen. Ebenso alle anderen Variablen, die hinter varvar Variablenname definiert wurden.
- Mich verwundert es außerdem ein wenig, warum für die Bilder kein Array angelegt wurde.
D.h.: Für jedes Bild wird eine Variable angelegt, die mit bilder[Nr.] einzeln angesprochen werden können.
Es wird zwar kein Array angelegt, aber die Bilder werden wie eines angesprochen.
Fragen über Fragen, ich muss auch erst einmal testen.
Ich habe aber den Eindruck, dass das Skript von Riddick einige Fehler aufweist, da es eben auch abgeändert wurde und, so wie es aussieht, von einer fertigen HTML-Seite stammt, und nicht für sich veränderte Inhalte wie die im Forum. Wenn das Bild zwischen zwei Foren-Tags angegeben wurde, könnte es schon nicht mehr funktionieren.
P.S.: Beim kurzen Inspizieren des Quelltextes vom Forum ist mir aufgefallen, dass einige Img-Tags nicht geschlossen sind. Dabei handelt es sich (glaube ich) um die Flaggen.
- Ist das Skript auch wirklich zwischen den Head-Tags positioniert?
- Im Skript steht am Ende window.onload = resizePics;. Das sorgt dafür, dass es auch beim Seitenaufbau geladen wird.
Alternativ würde ich es mal per Onload im Body-TagEine Anleitung inkl. Alternative gibt es hier. versuchen. Sollte zwar nicht die Ursache sein, könnte aber.
- Im Skript von Riddick ist var klasse = "tms2"; statt ifo1 angegeben. Das Skript geht zu dem zweiten übergeordneten Tag von dem Bild aus (parentNode.parentNode) und liest dort den Klassennamen (className) aus. Evtl. ist dort nur die Klasse tms2 vorhanden, wenn ifo1 fehlt, könnte ein Fehler die Folge sein. Eine Bedingung
if(bilder[i].parentNode.parentNode.className == klasse ...
vergleicht auch den oben angegebenen Klassennamen mit dem, der zwei übergeordnete Tags über dem Bild ist.Kleine Fragen:
Warum funktioniert es mit der anderen Klasse im originalen Template...? Warum wird überhaupt auf eine Klasse geprüft, und nicht gleich auf die Breite?
Und warum weiß das Skript, dass es genau zwei Tags nach oben wandern muss, und nicht drei, vier...?
- Eine, bei vielen eingebauten Skripten oft vorkommende Ursache, könnten die Variablen sein.
Vor allem der Zähler "i"
for(i=0; i<bilder.length; i++)
Später wird er auch in eckigen Klammern benutzt, um einzelne Bilder abzuarbeiten.Er wird oft benutzt, z.B. auch in meinem Slideshow-Skript. Es muss immer gewährleistet sein, dass die Variablen in allen Skripten, die gleichzeitig ausgeführt werden, nur jeweils in einem Skript vorkommen.
Der Zähler "i" sollte also umbenannt werden, oder zumindest nicht mehr in anderen Skripten vorkommen. Ebenso alle anderen Variablen, die hinter varvar Variablenname definiert wurden.
- Mich verwundert es außerdem ein wenig, warum für die Bilder kein Array angelegt wurde.
D.h.: Für jedes Bild wird eine Variable angelegt, die mit bilder[Nr.] einzeln angesprochen werden können.
Es wird zwar kein Array angelegt, aber die Bilder werden wie eines angesprochen.
Fragen über Fragen, ich muss auch erst einmal testen.
Ich habe aber den Eindruck, dass das Skript von Riddick einige Fehler aufweist, da es eben auch abgeändert wurde und, so wie es aussieht, von einer fertigen HTML-Seite stammt, und nicht für sich veränderte Inhalte wie die im Forum. Wenn das Bild zwischen zwei Foren-Tags angegeben wurde, könnte es schon nicht mehr funktionieren.
P.S.: Beim kurzen Inspizieren des Quelltextes vom Forum ist mir aufgefallen, dass einige Img-Tags nicht geschlossen sind. Dabei handelt es sich (glaube ich) um die Flaggen.
#3 RE: Bilderverkleinerungssript von frank23
29.01.2008 19:37
das sind ja schon mal viele Lösungsansätze. Mit der var-klasse hatte ich geändert, aber darin liegt der Fehler auch nicht, da es mit tms2 auch nicht funktioniert. Ich werde mal deine Vorschläge testen und vieleicht bekomme ich es ja noch am laufen. Das Script ist von der Idee her super, da bei uns auch oft User übergroße Fotos online stellen. Den Button dafür habe ich schon aus der Symbolbar entfernt. Leider verschieben diese großen Fotos das ganze Forum und man muss ständig nach rechts scrollen.
Mit den nicht geschlossenen img-tags war tatsächlich bei den Flaggen
, vielen Dank für den Tipp!
Das Script hat Riddick von einer HTML-Seite und für das Forum leicht abgeändert.
Mit den nicht geschlossenen img-tags war tatsächlich bei den Flaggen
, vielen Dank für den Tipp!Das Script hat Riddick von einer HTML-Seite und für das Forum leicht abgeändert.
#4 RE: Bilderverkleinerungssript von florian-zier
30.01.2008 17:31
Nochmals Überarbeitet!:
Ich habe das Skript general-überholt. Jetzt ist es sozusagen ein fast völlig anderes Skript.
Die Variablen-Namen müssten so gewählt sein, dass sie in keinem anderen Skript auch vorkommen.
Auf eine Klasse wird nun nicht mehr überprüft. Ich halte das für nicht sinnvoll, es geht ja um die Bildergröße.
Außerdem lag mit einer großen Wahrscheinlichkeit genau darin der Fehler. Ohne sollte das Skript nämlich gehen.
Besonderheiten:
- Beim überfahren mit der Maus wird eine HandDas Klick-Symbol, dass auch angezeigt wird, wenn man über Links fährt. 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 im Tooltip werden richtig dargestellt.Normalerweise werden Umlaute in JavaScript nicht richtig dargestellt.
Das Skript wird zwischen den Head-Tags eingefügt:
Als letztes muss das Skript noch beim Seitenaufbau aufgerufen werden.
Das geschieht wie immer per onload-Befehl im Body-Tagonload="resizePics()" oder nach dieser Anleitung, die hier verlinkt ist..
Ich habe das Skript general-überholt. Jetzt ist es sozusagen ein fast völlig anderes Skript.
Die Variablen-Namen müssten so gewählt sein, dass sie in keinem anderen Skript auch vorkommen.
Auf eine Klasse wird nun nicht mehr überprüft. Ich halte das für nicht sinnvoll, es geht ja um die Bildergröße.
Außerdem lag mit einer großen Wahrscheinlichkeit genau darin der Fehler. Ohne sollte das Skript nämlich gehen.
Besonderheiten:
- Beim überfahren mit der Maus wird eine HandDas Klick-Symbol, dass auch angezeigt wird, wenn man über Links fährt. 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 im Tooltip werden richtig dargestellt.Normalerweise werden Umlaute in JavaScript nicht richtig dargestellt.
Das Skript wird zwischen den Head-Tags eingefügt:
<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/Bild.gif';
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>
// 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/Bild.gif';
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>
Als letztes muss das Skript noch beim Seitenaufbau aufgerufen werden.
Das geschieht wie immer per onload-Befehl im Body-Tagonload="resizePics()" oder nach dieser Anleitung, die hier verlinkt ist..
#5 RE: Bilderverkleinerungssript von frank23
31.01.2008 13:58
Hallo Florian, vielen Dank für das Sript - funktioniert jetzt bei mir ohne Probleme! 
#7 RE: Bilderverkleinerungssript von florian-zier
07.12.2009 18:56
Hallo Luna42,
das sollte schon möglich sein.
Ersetze einmal folgenden Code:
1
var resize_pic_ausnahme = 'http://www.bilder-hochladen.net/files/Bild.gif';
...durch diesen:
1
2
3
2
3
var resize_pic_ausnahme = new Array(2);
resize_pic_ausnahme[0] = 'http://www.bilder-hochladen.net/files/Bild.gif';
resize_pic_ausnahme[1] = 'http://www.bilder-hochladen.net/files/Bild2.gif';
Die Zahl in "new Array(2)" gibt die Anzahl der Ausnahmen an.
Die Ausnahmen werden mit resize_pic_ausnahme[Index] angegeben, Index beginnend ab "0".
1
if (resize_pics_nr[i_pic_nr].src != resize_pic_ausnahme) {
...und die zugehörige geschweifte Klammer ("}") entfernen.
(Unbedingt den Quellcode dazwischen stehen lassen!)
Direkt in der Zeile nach:
1
for(i_pic_nr=0; i_pic_nr<resize_pics_nr.length; i_pic_nr++) {
folgenden neuen Quellcode hinzufügen:
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
var ex_found = false;
for(i_ausnahme=0;i_ausnahme<resize_pic_ausnahme.length; i_ausnahme++) {
if (resize_pics_nr[i_pic_nr].src == resize_pic_ausnahme[i_ausnahme]) {
ex_found = true;
}
}
if (ex_found) {
continue;
}
Bin ja mal gespannt, ob's geht...
#8 RE: Bilderverkleinerungssript von Luna42
11.12.2009 16:45
Vielen Dank! Hat ohne Problem funktioniert.