• Aktualisierte Forenregeln

    Eine kleine Änderung hat es im Bereich Forenregeln unter Abschnitt 2 gegeben, wo wir nun explizit darauf verweisen, dass Forenkommentare in unserer Heftrubrik Leserbriefe landen können.

    Forenregeln


    Vielen Dank

Javascript: Image Resizer

B

bigfraggle

Gast
Hallo!

Man kennt es aus Foren: Ist ein Bild größer als x Pixel, wird es automatisch mittels Javascript verkleinert. Klickt man dann auf das kleine Thumbnail, öffnet sich ein neues Fenster mit dem großen Bild.

Genau sowas suche ich im Grunde für eine normale Webseite. Im Idealfall werden alle Bilder, die sich in einem bestimmten Container befinden, skaliert. Schön wäre auch noch ein Hinweis wie "Das Bild wurde verkleinert. Bitte hier klicken um zur Vollansicht zu wechseln" oder so.

Ich habe heute recht lange gesucht, aber irgendwie nichts passendes gefunden, was kein Add-On einer Forensoftware ist.

PHP-Lösungen scheinen sich nicht anzubieten, da die Bilder teilweise von externen Servern stammen. Und die Dateigröße ist mir eigentlich schnuppe.

Weiß jemand Rat?

Gruß
bigfraggle
 
Wenn es nicht zu spät ist, hätte ich eine Lösung für dich.
Ich hoffe das ist jetzt hier nicht zuviel Code, sonst schicke ich dir das als Datei.

Das musst du in den <head></head> - Bereich deiner Seite einfügen
<SCRIPT LANGUAGE="JavaScript">
<!--
PositionX = 100;
PositionY = 100;
defaultWidth = 500;
defaultHeight = 500;
var AutoClose = true;

// ================================
if (parseInt(navigator.appVersion.charAt(0))>=4){
var isNN=(navigator.appName=="Netscape")?1:0;
var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
function popImage(imageURL,imageTitle){
if (isNN){imgWin=window.open('about:blank','',optNN);}
if (isIE){imgWin=window.open('about:blank','',optIE);}
with (imgWin.document){
writeln('<html><head><title>Loading...</title><style>body{margin:0px;}</style>');writeln('<sc'+'ript>');
writeln('var isNN,isIE;');writeln('if (parseInt(navigator.appVersion.charAt(0))>=4){');
writeln('isNN=(navigator.appName=="Netscape")?1:0;');writeln('isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}');
writeln('function reSizeToImage(){');writeln('if (isIE){');writeln('window.resizeTo(300,300);');
writeln('width=300-(document.body.clientWidth-document.images[0].width);');
writeln('height=300-(document.body.clientHeight-document.images[0].height);');
writeln('window.resizeTo(width,height);}');writeln('if (isNN){');
writeln('window.innerWidth=document.images["George"].width;');writeln('window.innerHeight=document.images["George"].height;}}');
writeln('function doTitle(){document.title="'+imageTitle+'";}');writeln('</sc'+'ript>');
if (!AutoClose) writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()">')
else writeln('</head><body bgcolor=000000 scroll="no" onload="reSizeToImage();doTitle();self.focus()" onblur="self.close()">');
writeln('<img name="George" src='+imageURL+' style="display:block"></body></html>');
close();
}}

//Hier die Resize-Funktion
function fixImgs(whichId, maxW) {
var pix=document.getElementById(whichId).getElementsByTagName('img');
for (i=0; i<pix.length; i++) {
w=pix.width;
h=pix.height;
if (w > maxW) {
f=1-((w - maxW) / w);
pix.width=w * f;
pix.height=h * f;
}
}
}
//-->
</script>
Zum Vergrößern anklicken....

Erklärungen:
Zuerst kommen die Anweisungen und Funktionen für das Popup, welches sich an die Größe des Originalbildes anpasst.
Danach kommt die Funktion "fixImage", welche alle Bilder (besser gesagt, alle Elemente mit dem "img"-Tag) in dem zu übergebenen Bereich (übergeben wird die ID) an die ebenfalls zu übergebene MAximalbreite anpasst. Die Höhe ergibt sich dann aus der Skalierung.

Die Bereiche mit den anzupassenen Bildern definierst du so (ich habe schon mal als Beispiel ein paar Bilder "eingefügt"):
<div id = "fotos">
<small>Bild anklicken, um zu vergrößern</small><br>
<img src="test.jpg" border="1" onclick = "popImage('test.jpg','test')"; >
<img src="test.jpg" border="1" onclick = "popImage('test.jpg','test')"; >
<img src="test.jpg" border="1" onclick = "popImage('test.jpg','test')"; >
</div>
Zum Vergrößern anklicken....

Im BODY-Tag musst du nun die Anweisung geben, dass die Funktion auf ein bestimmtes Element angewendet wird. Das erste Argument ist also die ID des entsprechenden Containers und das zweite Argument ist die maximale Breite des Thumbnails/Bildes.
<body onload="fixImgs('fotos', 200);">
Zum Vergrößern anklicken....

Ich hoffe das war etwas verständlich ausgedrückt. Ist einfacher, als es sich anhört. Du kannst natürlich beliebig viele "Container" mit Bildern erstellen. Du musst nur daran denken, die dann auch im Body-Onload an die Funktion zu übergeben.
 
Mothman am 24.09.2008 17:48 schrieb:
<img src="test.jpg" border="1" onclick = "popImage('test.jpg','test')"; >
Zum Vergrößern anklicken....

Gibt es irgendeine Möglichkeit, dieses "onclick" automatisch für alle img-Tags zu definieren? So, dass man das nicht jedes mal schreiben muss?
 
bigfraggle am 24.09.2008 18:16 schrieb:
Mothman am 24.09.2008 17:48 schrieb:
<img src="test.jpg" border="1" onclick = "popImage('test.jpg','test')"; >
Zum Vergrößern anklicken....

Gibt es irgendeine Möglichkeit, dieses "onclick" automatisch für alle img-Tags zu definieren? So, dass man das nicht jedes mal schreiben muss?
Zum Vergrößern anklicken....
Nein, du mußt ja für "test.jpg" immer ein andere Bild einsetzen, was dann vergrößert werden soll.
 
bigfraggle am 23.09.2008 17:18 schrieb:
PHP-Lösungen scheinen sich nicht anzubieten, da die Bilder teilweise von externen Servern stammen.
Zum Vergrößern anklicken....
... von denen du hoffentlich die Erlaubnis hast.

Einem anderen User, der ein Bild ohne entsprechende Erlaubnis bei einem Ebay Artikel verwendet hat, ist letztens eine Zahlungsaufforderung in Höhe von 350€ ins Haus geflattert ...
 
EDIT: Sorry habe den Code nochmal rausgenommen. DA war ein Fehler drin.

Werde nachher nochmal drübergucken, ob ich es noch hinkriege. =)

EDIT2: Ich dachte eigentlich auch, dass die Bilder eh dynamisch geladen werden. Dann setzt du da einfach die Variablen ein und machst eine Schleife draus.
Ich muss jetzt erstmal essen.. :B
 
Keine Sorge, die Erlaubnis habe ich... ;)

@Mothman

Hm, bin mir nicht sicher, inwiefern das damit klappt.

Die Newstexte werden mit einem WYSIWYG-Editor (FCKeditor) erstellt. Auf die HTML-Ausgabe habe ich daher nur wenig Einfluss. Und jedem Newswriter (der u.U. keine Ahnung von HTML & Co. hat) zu sagen, er möge manuell ein onclick oder sowas in den IMG-Tag zufügen, ist auch nur bedingt machbar.

Im Idealfall würde das Script einfach alle Bilder im div "xy" überprüfen, ohne das man noch etwas hinzufügen muss.
 
Also ich hab da nochmal eingies ausprobiert. Leider stößt Javascript da an seine Grenzen. Das Problem ist zwar nur ein ganz kleines, würde aber zu weit führen das zu erläutern.

Eine Möglichkeit wäre den FCKEditor zu modifizieren. Ich denke das ist möglich, ich habe den auch schonmal für ein Projekt benutzt.
Du könntest z.B. immer wenn jemand ein Bild hinzufügt den String vor dem Abspeichern in die Datenbank abfangen und so ändern, dass du das onclick-Ereignis hinzufügst.
in php.
Z.B. (ungetestet) so:
/*
DU HAST SICHERLICH AUCH DIE BILD-URL ALS VARIABLE ZUR VERFÜGUNG, ICH WEISS NUR NICHT, WIE DIE HEISST
DER IMG-TAG SETZT SICH JA DYNAMISCH ZUSAMMEN, AUS DEM EINGABEDATEN DES USERS
*/
$img_tag = "<img src = \"test.jpg\" width = \"200\" height = \"222\" title = \"bla\" >";

$img_tag_neu = str_replace(">","",$img_tag);

//HIER KOMMT DANN DIE BILD-URL-VARIABLE ZUM EINSATZ, SAGEN WIR SIE LAUTET $bild_url
$img_tag_neu = $img_tag_neu . "onclick = \"popImage('" . $bild_url . "','" . $bild_url . "');\" >";
Zum Vergrößern anklicken....

Hoffe das ist zumindest ein Denkanstoß. :)
 
eingebundene prototype-library vorausgesetzt

im header die entsprechende popup-funktion definieren (hier openWindow(url) genannt)

Code: 
<script type="text/javascript">
        // <![CDATA[
     function openWindow(url) {
      // ...
     }
     
     document.observe("dom:loaded",function() {
      $("xy").select("img").each(function(item) {
       item.writeAttribute("onClick","openWindow('"+item.src+"');");
      });
     });
        // ]]>
</script>
 
@marky68: Also das Script inkl. prototype.js in Verbindung mit Mothmans Script nutzen?

@Mothman: Hm, habe das obige Script mal gestestet. Funktioniert bei mir nicht, die Bilder haben die normale Größe. Muss das Script wirklich an den Anfang? Da sind die Bilder ja noch nicht geladen.
 
bigfraggle am 25.09.2008 18:23 schrieb:
@Mothman: Hm, habe das obige Script mal gestestet. Funktioniert bei mir nicht, die Bilder haben die normale Größe. Muss das Script wirklich an den Anfang? Da sind die Bilder ja noch nicht geladen.
Zum Vergrößern anklicken....
Also ich habe es im IE6 im aktuellen FF und im Google Chrome getestet und bei mir ging es bei allen. Ich kanns mir gerade nicht anschauen, bin an einem anderen PC. Aber einen Fehler in meinem POsting möchte ich nicht ausschließen.
Welchen Browser benutzt du denn, wenn ich fragen darf?

Hast du auch im onload-Event der Seite die Funktion richtig aufgerufen?
<body onload="fixImgs('fotos', 200);">
 
bigfraggle am 25.09.2008 18:23 schrieb:
@marky68: Also das Script inkl. prototype.js in Verbindung mit Mothmans Script nutzen?
Zum Vergrößern anklicken....

nein. ich bin mal davon ausgegangen, dass du popup und resize (im uebrigen per JS kein echter resize, da filesize gleich bleibt) allein hinbekommst ;)
 
@Mothman: IE7, Opera 9.51 und FF 3.0.2

marky68 am 25.09.2008 19:51 schrieb:
bigfraggle am 25.09.2008 18:23 schrieb:
@marky68: Also das Script inkl. prototype.js in Verbindung mit Mothmans Script nutzen?
Zum Vergrößern anklicken....

nein. ich bin mal davon ausgegangen, dass du popup und resize (im uebrigen per JS kein echter resize, da filesize gleich bleibt) allein hinbekommst ;)
Zum Vergrößern anklicken....

Hm, bin nicht so der Held... ;(
 
im head

Code: 
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script type="text/javascript">
        // <![CDATA[
     
     var mypopup;
     
     function popup(url,width,height) {
      if (url && width && height) {
       width += 20;
       height += 20;
       mypopup = window.open(url,"PopUp","width="+width+",height="+height+",resizable");
       return (mypopup) ? false : true;
      }
      else return true;
     }   
        
     var maximumWidth = 200; // px
     var divid = "xy";
        
     document.observe("dom:loaded",function() {
      $(divid).select("img").each(function(item) {
       mywidth = parseInt($(item).getStyle("width"));
       myheight = parseInt($(item).getStyle("height"));
       $(item).up().writeAttribute("onClick","return popup('"+item.src+"',"+mywidth+","+myheight+");");
       if (mywidth > maximumWidth) {
        factor = 1-(mywidth-maximumWidth)/mywidth;
        $(item).setStyle({
         width:mywidth*factor+"px",
         height:myheight*factor+"px"
        });
       }
      });
     });
     
        // ]]>
    </script>
    <style type="text/css">
     a img {
      border:0;
     }
    </style>

anwendung:

Code: 
   <div id="xy">
    <a href="http://www.google.de/intl/de_de/images/logo.gif" title="Click for PopUp">
     <img src="http://www.google.de/intl/de_de/images/logo.gif" alt="Google Logo" title="Google" />
    </a>
   </div>
 
Nahezu perfekt! :)

Allerdings muss das Script wirklich am Ende der Page eingebunden werden.
Ist ja eigentlich auch logisch, da die Bilder beim Seitenaufruf ja erst später geladen werden.

Trotzdem noch eins:

Gibt es wirklich keine Chance, das Popup plus Hinweis ("Bitte hier für Vollansicht klicken" oder so ähnlich; am besten wäre eine extra Box unter dem Bild) außerhalb des Containers zu definieren?

Edit:

Hm, oder soll das Popup durch diese Zeile erzeugt werden?
Code: 
$(item).up().writeAttribute("onClick","return popup('"+item.src+"',"+mywidth+","+myheight+");");
Wenn ja, dann klappt das irgendwie nicht.
 
bigfraggle am 28.09.2008 00:55 schrieb:
Nahezu perfekt! :)

Allerdings muss das Script wirklich am Ende der Page eingebunden werden.
Ist ja eigentlich auch logisch, da die Bilder beim Seitenaufruf ja erst später geladen werden.
Zum Vergrößern anklicken....

benutze das event "load" anstelle von "dom:loaded". siehe auch http://prototypejs.org/api/document/observe und http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/domcontentloaded-event-for-browsers

Trotzdem noch eins:

Gibt es wirklich keine Chance, das Popup plus Hinweis ("Bitte hier für Vollansicht klicken" oder so ähnlich; am besten wäre eine extra Box unter dem Bild) außerhalb des Containers zu definieren?
Zum Vergrößern anklicken....

wie meinst du das?
zeig am besten den source her wie du das bild einbinden willst.

Edit:

Hm, oder soll das Popup durch diese Zeile erzeugt werden?
Code: 
$(item).up().writeAttribute("onClick","return popup('"+item.src+"',"+mywidth+","+myheight+");");
Wenn ja, dann klappt das irgendwie nicht.
Zum Vergrößern anklicken....

diese zeile fuegt dem <a>-tag, also dem parent des bildes selbst (s. prototype api: element -> up() ) das onClick Attribut hinzu, um das popup zu oeffnen. wenn javascript deaktiviert ist oder das popup geblockt wird, wird im normalen browserfenster auf das bild weitergeleitet.
 
marky68 am 28.09.2008 15:39 schrieb:
bigfraggle am 28.09.2008 00:55 schrieb:
Nahezu perfekt! :)

Allerdings muss das Script wirklich am Ende der Page eingebunden werden.
Ist ja eigentlich auch logisch, da die Bilder beim Seitenaufruf ja erst später geladen werden.
Zum Vergrößern anklicken....

benutze das event "load" anstelle von "dom:loaded". siehe auch http://prototypejs.org/api/document/observe und http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/domcontentloaded-event-for-browsers
Zum Vergrößern anklicken....

Ok, hängt wohl mit dem Browser zusammen. Damit es wirklich bei allen Browsern läuft, muss ich das Script ans Ende vom Body setzen. Da es damit funktioniert, ist mir das aber eigentlich egal. Es sei denn, es gibt Gründe, dies auf keinen Fall zu tun.

Trotzdem noch eins:

Gibt es wirklich keine Chance, das Popup plus Hinweis ("Bitte hier für Vollansicht klicken" oder so ähnlich; am besten wäre eine extra Box unter dem Bild) außerhalb des Containers zu definieren?
Zum Vergrößern anklicken....

wie meinst du das?
zeig am besten den source her wie du das bild einbinden willst.
Zum Vergrößern anklicken....

Ok, habe gesehen, dass das Popup nur beim IE7 nicht generiert wird.
Gibts da Möglichkeiten dies hinzubekommen?

Was den "Hinweis" angeht: Cool wäre, wenn z.B. unter dem verkleinerten Bild ein Text erscheint, der auf die Vollbildansicht aufmerksam macht.
 
Habe noch zwei "Bugs" gefunden...

1) Irgendwie bekommen jetzt alle Bilder im Container ein Popup verpasst. Kann man das irgendwie auf die wirklich betreffenden Pix eingrenzen?

2) Bei Firefox und Opera wird jetzt quasi der komplette Container "verlinkt". Man kann also irgendwo in den Bereich klicken und schwupps öffnet sich ein neues Fenster - ob da nun ein Bild war oder nicht. Ärgerlich ist dabei, dass auch normale Links nicht mehr funktionieren. Anscheinend überlagert das Script alle URLs...
 
bigfraggle am 29.09.2008 14:46 schrieb:
Was den "Hinweis" angeht: Cool wäre, wenn z.B. unter dem verkleinerten Bild ein Text erscheint, der auf die Vollbildansicht aufmerksam macht.
Zum Vergrößern anklicken....

Code: 
     document.observe("dom:loaded",function() {
      $(divid).select("img").each(function(item) {
       mywidth = parseInt($(item).getStyle("width"));
       myheight = parseInt($(item).getStyle("height"));
       $(item).up().writeAttribute("onClick","return popup('"+item.src+"',"+mywidth+","+myheight+");");
       if (mywidth > maximumWidth) {
        factor = 1-(mywidth-maximumWidth)/mywidth;
        $(item).setStyle({
         width:mywidth*factor+"px",
         height:myheight*factor+"px"
        });
       }
       mydiv = new Element("div",{"class":"note"});
       $(item).up().wrap(mydiv);
       mydiv.insert({bottom:"Click for PopUp"});
      });
     });

div#note dann entsprechend formatieren

bigfraggle am 03.10.2008 23:35 schrieb:
Habe noch zwei "Bugs" gefunden...

1) Irgendwie bekommen jetzt alle Bilder im Container ein Popup verpasst. Kann man das irgendwie auf die wirklich betreffenden Pix eingrenzen?
Zum Vergrößern anklicken....

ohne unterscheidung im img-tag nicht, etwa per class. aber du sagtest ja, dass das nicht moeglich sei.

2) Bei Firefox und Opera wird jetzt quasi der komplette Container "verlinkt". Man kann also irgendwo in den Bereich klicken und schwupps öffnet sich ein neues Fenster - ob da nun ein Bild war oder nicht. Ärgerlich ist dabei, dass auch normale Links nicht mehr funktionieren. Anscheinend überlagert das Script alle URLs... [/quote]

kann ich nicht nachvollziehen.
bitte poste mal deinen beispiel source!
 
Einloggen o. Registrieren zum Antworten.

Ähnliche Themen

Falk_Jeromin
  • Gesperrt
Tutorial: neue PCGames-Forensoftware
Antworten
0
Aufrufe
12K
Falk_Jeromin
Falk_Jeromin
B
array ende bei einer php-bildergallery
Antworten
2
Aufrufe
410
Biloboy
B
D
[Sammelthread] Windows XP/Vista: Problemlösungen und Tipps/Tweaks
Antworten
3
Aufrufe
1K
d00mfreak
D
ZAM
Wie werd ich HTML-Profi?
2 3
Antworten
44
Aufrufe
1K
ZAM
ZAM
J
Brauche ein weiteres Script falls es so eins gibt :-)
Antworten
8
Aufrufe
321
Flixus
F
Oben Unten
Zurück