php - max bredde/højde i billed. - Udvikleren.dk - Programmering, webdesign og grafik

Tags: php javascript

Bruger #17118 @ 14.05.12 07:18

Godmorgen Udviklere.

Jeg sidder og leger lidt med TextEditor
Og når jeg vælger et link til et stort billed, fylder den mere end min content. Så det kunne være nice hvis den allerede i udskriv nyhed, at den ikke viser mere end "max".
Så er spørgsmålet, hvordan?

JScript kode

 EditorHTML += "<img onclick=\"addImage('"+ i +"');\" style=\"border:1px solid #EEEEEE;margin-right:5px;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/image.gif\" title=\"Indsæt billede\" />";

Hele TextEditorer.js filen

JScript kode

 TextEditor = document.getElementsByTagName("textarea");
 function setEditor() {
     FocusedElement = TextEditor.length-1;
     if(TextEditor[0]){
         for(i=0;i<TextEditor.length;i++){
             if(TextEditor[i].className.match("no_editor") != "no_editor"){
                 setCursor(TextEditor[i], i)
                 var EditorDiv = document.createElement('div');
                 BrowserStyle = "margin:1px 0px -1px 0px;";
                 TextEditor[i].style.height = TextEditor[i].style.height.substr(0, TextEditor[i].style.height.length-2) - 26 + "px";
 
                 if(TextEditor[i].className.match("FullWidthElm") == "FullWidthElm"){
                     EditorWidth="100%";
                     EditorPaddingRight="padding-right:4px;"
                 } else {
                     EditorPaddingRight="";
                     EditorWidth = (TextEditor[i].offsetWidth-2-4) + "px";
                 }
                 
                 EditorHTML = "<div style=\"border:1px solid #787878;padding:2px;"+EditorPaddingRight+"border-bottom:0px;background-color:#EEEEEE;width:"+ EditorWidth +";"+ BrowserStyle +"\"\">";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'b');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"b\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/bold.gif\" title=\"Fed tekst\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'i');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"i\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/italic.gif\" title=\"Kursiv tekst\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'u');\" style=\"border:1px solid #EEEEEE;margin-right:5px;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"u\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/underline.gif\" title=\"Understreget tekst\" />";
                 EditorHTML += "<img onclick=\"addLink('"+ i +"');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"url\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/link.gif\" title=\"Indsæt link\" />";
                 EditorHTML += "<img onclick=\"addImage('"+ i +"');\" style=\"border:1px solid #EEEEEE;margin-right:5px;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/image.gif\" title=\"Indsæt billede\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'h1');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/h1.gif\" title=\"Overskrift 1\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'h2');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/h2.gif\" title=\"Overskrift 2\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'h3');\" style=\"border:1px solid #EEEEEE;margin-right:5px;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/h3.gif\" title=\"Overskrift 3\" />";
                 EditorHTML += "<img onclick=\"addFormat('"+ i +"', 'code');\" style=\"border:1px solid #EEEEEE;\" onmouseover=\"butActive(this);\" onmouseout=\"butUnActive(this);\" id=\"img\" src=\"" + MainPath +"Loggetind/Levels/Nyheder/code.gif\" title=\"Indsæt kodeboks\" />";
                 EditorHTML += "</div>";
                 EditorDiv.innerHTML = EditorHTML;
                 TextEditor[i].parentNode.insertBefore(EditorDiv, TextEditor[i]);
             }
         }
     }
 }
 
 function butActive(obj){
     obj.style.backgroundColor = "#CFE1F9";
     obj.style.border = "1px solid #30559C";
 }
 
 function butUnActive(obj){
     obj.style.backgroundColor = "";
     obj.style.border = "1px solid #EEEEEE";
 }
 
 function addFormat(pArea, pFormat){
     TextEditor[pArea].focus();
     startTxt = "["+pFormat+"]";
     endTxt = "[/"+pFormat+"]";
     if(document.all){
         Range = document.selection.createRange();
         if(pFormat == "quote" || pFormat == "code")
             Range.text = startTxt + "\n" + Range.text + "\n" + endTxt;
         else
             Range.text = startTxt + Range.text + endTxt;
             Range.select();
     } else {
         cursorpos = TextEditor[pArea].selectionEnd+startTxt.length+endTxt.length;
         selectionTxt = TextEditor[pArea].value.substr(TextEditor[pArea].selectionStart, TextEditor[pArea].selectionEnd-TextEditor[pArea].selectionStart);
         if(pFormat == "quote" || pFormat == "code"){    
             selectionTxt = startTxt + "\n" + selectionTxt + "\n" + endTxt;
             cursorpos = cursorpos + 2;
         } else {
             selectionTxt = startTxt + selectionTxt + endTxt;
         }
         TextEditor[pArea].value = TextEditor[pArea].value.substr(0, TextEditor[pArea].selectionStart) + selectionTxt + TextEditor[pArea].value.substr(TextEditor[pArea].selectionEnd);
         TextEditor[pArea].setSelectionRange(cursorpos, cursorpos);
     }
     TextEditor[pArea].focus();
 }
 
 function addAttachmentFormat(pFormat, pFilename){
     TextEditor[FocusedElement].focus();
     if(pFormat == "image"){
         startTxt = "[img att="+ pFilename +"]";
         endTxt = "";
     } else if(pFormat == "link"){
         startTxt = "[url att="+ pFilename +"]";
         endTxt = "[/url]";    
     }
     if(document.all){
         Range = document.selection.createRange();
         if(pFormat == "image"){
             Range.text = startTxt + endTxt;
         } else {
             if(Range.text != ""){
                 centerTxt = Range.text
             } else {
                 centerTxt = prompt("Indtast navnet på linket", "");
                 if(centerTxt == null)
                 return false;
             }
             Range.text = startTxt + centerTxt + endTxt;
             Range.select();
         }
     } else {
         selectionTxt = TextEditor[FocusedElement].value.substr(TextEditor[FocusedElement].selectionStart, TextEditor[FocusedElement].selectionEnd-TextEditor[FocusedElement].selectionStart);
         if(pFormat == "image"){    
             cursorpos = TextEditor[FocusedElement].selectionStart+startTxt.length+endTxt.length;
             selectionTxt = startTxt + endTxt;
         } else {
             if(selectionTxt != ""){
                 centerTxt = selectionTxt;
             } else {
                 centerTxt = prompt("Indtast navnet på linket", "");
                 if(centerTxt == null)
                 return false;
             }
             cursorpos = TextEditor[FocusedElement].selectionStart+centerTxt.length+startTxt.length+endTxt.length;
             selectionTxt = startTxt + centerTxt + endTxt;
         }
         TextEditor[FocusedElement].value = TextEditor[FocusedElement].value.substr(0, TextEditor[FocusedElement].selectionStart) + selectionTxt + TextEditor[FocusedElement].value.substr(TextEditor[FocusedElement].selectionEnd);
         TextEditor[FocusedElement].setSelectionRange(cursorpos, cursorpos);
     }
     TextEditor[FocusedElement].focus();
 }
 
 function setCursor(pObj, pI){
     pObj.onfocus = function() {
         FocusedElement = pI;
     }
 }
 
 function addLink(pArea) {
     TextEditor[pArea].focus();
     linkAddress = prompt('Indtast adressen på linket:', 'http://');                
     if ((linkAddress != null) && (linkAddress != "") && (linkAddress != "http://")) {
         startTxt = "[url="+ linkAddress +"]";
         endTxt = "[/url]";
         if(document.all){
             Range = document.selection.createRange();
                 if(Range.text == ""){
                     linkName = prompt('Indtast navnet på linket', '');
                     centerTxt = linkName;
                 } else {
                     centerTxt = Range.text;
                 }
             Range.text = startTxt + centerTxt + endTxt;
             Range.select();
         } else {
             selectionTxt = TextEditor[pArea].value.substr(TextEditor[pArea].selectionStart, TextEditor[pArea].selectionEnd-TextEditor[pArea].selectionStart);        
                 if(selectionTxt == ""){
                     linkName = prompt('Indtast navnet på linket', '');
                     centerTxt = linkName;
                 } else {
                     centerTxt = selectionTxt;
                 }
             cursorpos = TextEditor[pArea].selectionStart+centerTxt.length+linkAddress.length+startTxt.length+endTxt.length;
             selectionTxt = startTxt + centerTxt + endTxt;
             TextEditor[pArea].value = TextEditor[pArea].value.substr(0, TextEditor[pArea].selectionStart) + selectionTxt + TextEditor[pArea].value.substr(TextEditor[pArea].selectionEnd);
             TextEditor[pArea].setSelectionRange(cursorpos, cursorpos);
         }
     }
     TextEditor[pArea].focus();
 }
 
 function addImage(pArea) {
     TextEditor[pArea].focus();
     imageAddress = prompt('Indtast adressen på billedet:', 'http://');                
     if ((imageAddress != null) && (imageAddress != "") && (imageAddress != "http://")) {
         startTxt = "[img]";
         endTxt = "[/img]";
         if(document.all){
             Range = document.selection.createRange();
             Range.text = startTxt + imageAddress + endTxt;
             Range.select();
         } else {
             cursorpos = TextEditor[pArea].selectionEnd+imageAddress.length+startTxt.length+endTxt.length;
             selectionTxt = TextEditor[pArea].value.substr(TextEditor[pArea].selectionStart, TextEditor[pArea].selectionEnd-TextEditor[pArea].selectionStart);        
             selectionTxt = startTxt + imageAddress + endTxt;
             TextEditor[pArea].value = TextEditor[pArea].value.substr(0, TextEditor[pArea].selectionStart) + selectionTxt + TextEditor[pArea].value.substr(TextEditor[pArea].selectionEnd);
             TextEditor[pArea].setSelectionRange(cursorpos, cursorpos);
         }
     }
     TextEditor[pArea].focus();
 }

Udskriver med echo nl2br($vis[nyhed]);

Det skal lige siges, hvis nu billedet er under max, skal den ikke vises som max, men som det nu er.
Det er kun hvis den overgår max. så skal den forblive "max" og ikke mere.

Hvis det nu blot var i upload billed, kunne jeg have brugt: $upload->set_resize(500, 500);

Men det er jo i udskrivning af billedet i php der skal sige max, men gerne under max. Hvis billedet eks er: 140x300px skal det vises i det px. Men er den over 500x500px, må den kun vises som 500x500px.

Indlæg senest redigeret d. 14.05.2012 07:36 af Bruger #17118

2 svar postet i denne tråd vises herunder
0 indlæg har modtaget i alt 0 karma

Sorter efter stemmer Sorter efter dato

Bruger #16025 @ 14.05.12 09:41

442

JScript kode

 function resize(which, max) {
   var elem = document.getElementById(which);
   if (elem == undefined || elem == null) return false;
   if (max == undefined) max = 500;
   if (elem.width > elem.height) {
     if (elem.width > max) elem.width = max;
   } else {
     if (elem.height > max) elem.height = max;
   }
 }

HTML kode

 <img id="some_image" onload="resize('some_image')" src="some_image.jpg" />

Søgte blot på Google, og fandt dette: http://atomgiant.com/2006/05/30/resize-images-with-javascript/

Indlæg senest redigeret d. 14.05.2012 09:42 af Bruger #16025

Bruger #17118 @ 14.05.12 10:20

Jamen er ikke lige med.
I Indsæt billed i Textarea. der gør jeg det med den javascript funktion jo.
Den uploader ikke et billed, men henter fra en sti (URL).
Og udskriver med

PHP kode

 $b = preg_replace("/\[img\](.*?)\[\/img\]/", "<img src=\"\\1\" border=\"0\">", $b);

Via: echo nl2br($vis[nyhed]);

-
how to resize image from url
Men alt jeg finder der, er ikke noget jeg lige kan få sammensat i mit script med bb kode

Indlæg senest redigeret d. 14.05.2012 10:31 af Bruger #17118

max bredde/højde i billed.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler