• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bilder Verkleinerung

  • Ersteller Ersteller egonkab
  • Erstellt am Erstellt am
Status
Für weitere Antworten geschlossen.
E

egonkab

Guest
Moin Moin, also ich suche ein Script. Und zwar sollte es so Funktionieren: Ich habe ein Bild was geuppt wird. Das Bild wird automatisch verkleinert auf eine gewissen Grösse. Wenn ich auf das Bild klicke sollte es jedoch seine Ursprüngliche Größe zurück gehen! Wenn jemand so eins kennt / hat / programmieren kann waere es ganz nett!
 
Also hmm ich weiss nicht die Darstellungsgrösse eines Bildes lässt sich ja immer einstellen.

Aber wenn ich dich verstehe willst du das das Bild neu gespeichert und dabei verkleinert wird.

dazu brauchts sicherlich schon nen richtigen Server und so, weil man braucht ein tool das JPG speichern kann.

Und wenn man ein Bild mal verkleinert gehen immer iNhaltsinformationen verloren (kurz gesagt Quali) und die bekommt man dann nie mehr zurück. Wenn du es dann größer haben willst musst du es einfach vergrössert darstellen lassen. besser wird es dadurch nicht.

Falls ich jetzt was anderes meine solltest du dein problem nochmals präzisieren.
 
Nur mal rein theoretisch:
Du müsstest das verkleinerte Bild beim ersten Betrachten aus dem Original erzeugen und unter einem neuen Dateinamen speichern. Dieses verkleinerte Bild wird dann immer sofort angezeigt, wenn die Seite aufgerufen wird. Im HTML ist dieses Bild mit dem Originalbild verlinkt. Klickt man also auf das Bild wird das Original angezeigt.

Das ist aber keine HTML-Frage - eher eine php (für die Bilderzeugung) und vielleicht auch JavaScript-Frage (wenn du das Original z.B. in einem Popup oder einem Layer darstellen willst).
 
Also habe mal das hier zusammengebastelt auf die schnelle... Nun bekomme ich das nicht xhtml Valid. Kann mir da einer helfen?
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<script language="javascript">
<!--
var angezeigtebreite = 150;
var gespeichertebreite = 0;

function bildanpassen(bild)
{
    if (bild.width > angezeigtebreite || gespeichertebreite > angezeigtebreite)
    {
        if (bild.width == angezeigtebreite)
        {
            bild.width = gespeichertebreite;
        }
        else
        {
            gespeichertebreite = bild.width;
            bild.style.cursor = "pointer";
            bild.width = angezeigtebreite;
        }
    }
}
//-->
</script>
<img onclick="bildanpassen(this)" onload="bildanpassen(this)" src="{URL}" title="Zum Vergrößern/Verkleinern anklicken">

Kommen dann die Fehler:

HTML:
Validation Output:  8 Errors

   1. Error Line 2, Column 17: there is no attribute "language".

      <script language="javascript"> 

      ✉

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
   2. Error Line 2, Column 29: required attribute "type" not specified.

      <script language="javascript"> 

      ✉

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   3. Error Line 2, Column 29: document type does not allow element "script" here.

      <script language="javascript"> 

      ✉

      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
   4. Error Line 25, Column 41: there is no attribute "onload".

      … onclick="bildanpassen(this)" onload="bildanpassen(this)" src="{URL}" title="

      ✉

      You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

      This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

      How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.
   5. Error Line 25, Column 118: required attribute "alt" not specified.

      …Zum Vergrößern/Verkleinern anklicken">

      ✉

      The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

      Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
   6. Error Line 25, Column 118: document type does not allow element "img" here.

      …Zum Vergrößern/Verkleinern anklicken">

      ✉

      The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

      One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
   7. Error Line 25, Column 119: end tag for "img" omitted, but OMITTAG NO was specified.

      …um Vergrößern/Verkleinern anklicken">

      ✉

      You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
   8. Info Line 25, Column 0: start tag was here.

      <img onclick="bildanpassen(this)" onload="bildanpassen(this)" src="{URL}" title=

   9. Error Line 25, Column 119: no document element.

      …um Vergrößern/Verkleinern anklicken">
 
Zuletzt bearbeitet von einem Moderator:
JavaScripte bindet man so ein:

Code:
<script type="text/javascript">

Bilder-Tags schreibt man bei xhtml so:

Code:
<img src="bild.jpg" alt="" />
 
sorry, aber anzeige breiten verändern ist tinnef, ein 80 MB bild wird trotzdem komplett geladen. das muss man anders machen.
php kann problemlos thumbnails erstellen.

PHP:
<?php

$conf['picpath'] = "Pfad zum Bilderverzeichnis"; // ohne slash am ende
$conf['thumbpath'] = "thumbs"; // pfad zum thumbnail verzeichnis ohne slash am ende

$maxheight = 100;  // Maximale Höhe thumb
$maxwidth = 100;  // Maximale Breite thumb

$PICPATH = $conf['picpath']."/".$_GET['picname'].".jpg";

function resize($pfad)
{
    global $maxheigh, $maxwidth;

    if(!file_exists($pfad))
    {
        return false;
    }

  // Berechnungen
    $size = getimagesize($pfad);
    $breite = $size[0];
    $hoehe = $size[1];

    if($breite <= $hoehe)
    { // Bild ist im Hochformat
        $neueHoehe = $maxheight;
        $neueBreite = intval($breite*$neueHoehe/$hoehe); // neue Breite berechnen
    }
    else
    { // Bild ist im Querformat
        $neueBreite=$maxwidth;
        $neueHoehe= intval($hoehe*$neueBreite/$breite); // neue Höhe berechnen
    }


  // Thumb erstellen
    $altesBild = ImageCreateFromJPEG($pfad); // Altes Bild
    $neuesBild = ImageCreateTruecolor($neueBreite,$neueHoehe); // Neues Bild wird erstellt
    imagecopyresampled($neuesBild,$altesBild,0,0,0,0,$neueBreite,$neueHoehe,$breite,$hoehe); // und das alte Bild wird verkleinert hineinkopiert
    return $neuesBild; // das neue Bild wird zurückgegeben
}

if(!file_exists($conf['thumbpath']."/".$_GET['picname'].".jpg"))
{
    $Thumb = resize($PICPATH); // Funktionsaufruf
    ImageJPEG($Thumb,$conf['thumbpath']."/".$_GET['picname'].".jpg",100); // Bild wird ausgegeben
    Imagedestroy($Thumb); // und schlussendlich der Speicher freigegeben
    echo "neu"; // neu errechnet anzeige
}
?>
<p>
<a href="<? echo $conf['picpath']."/".$_GET['picname']; ?>.jpg" target="_blank"><img src="<? echo $conf['thumbpath']."/".$_GET['picname']; ?>.jpg" /></a></p>
kleines beispiel, wie man bilder resizen kann

der aufruf resizer.php?picname=blabla sucht im bilderverzeichnis nach dem bild blabla.jpg, erstellt ein thumbnail im verzeichnis thumbs und zeigt das bild an. klick drauf und es geht das original auf...

gd muss unter php installiert sein !
das neu über dem bild zeigt an, ob es schon vorhanden war oder erst errechnet wurde.
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.
Zurück
Oben