Bildergalerie

basti1012

Achso.

Ja @Bandit hat ja gerade ein Code gepostet wo man zwei Bilder benutzt.

Einmal ein Thumb als kleines Vorschaubild ( was Datenvolumen schonen tut) und ein großes Bild was beim anklicken gezeigt wird.

Ich habe mich jetzt nicht durch die Manual des Scriptes gelesen , doch als ein kleines Thumb Bild zu nutzen kann man da auch bestimmt das große Bild als kleines Bild reinladen( das schont aber nicht das Datenvolumen weil das große Bild geladen wird und nur durch Css kleiner gemacht wurde)

Wenn du deinen Besucher schnellere Ladezeiten geben willst und bei Google SEO steigen willst dann solltest du aus deinen großen Bildern ein Thumb erstellen.

Dann nimmst du den Code von @Bandit aus post #20 und es solte alles bestens sein.

Dann zeigst du als Vorschau die Thumb Bilder und beim anklicken werden die großen gezeigt.

Das mag ein Besucher und SEO erst recht

Bandit

Zitat von Spider67

Wird sicher eine schöne Arbeit werden bei ungefähr 60 Bildern!!

Mit einem passenden Script eine Sache von ein paar Sekunden. Wenn du auf deinem Rechner einen Webserver mit PHP laufen hast, kann du mit folgendem Script alle Bilder auf eine Größe bringen:

index.php

PHP

<html>
<head>
<title>Image-Resizer</title>
</head>
<body>
<?php
   if ( ! isset($_POST["submit"]))
   {
?>
      <div align='center'>
        <center>
      <form action='<?php echo $_SERVER["SCRIPT_NAME"]; ?>' method='POST'>
      <table border='0' width='50%'>
        <tr>
          <td width='16%'></td>
          <td width='84%'><font size='5'><b>Image-Resizer</b></font></td>
        </tr>
        <tr>
          <td width='16%' height='20'>&nbsp;</td>
          <td width='84%' height='20'>&nbsp;</td>
        </tr>
        <tr>
          <td width='16%'>Quellverzeichnis:</td>
          <td width='84%'><input type='text' name='source' size='30'></td>
        </tr>
        <tr>
          <td width='16%'>Zielverzeichnis:</td>
          <td width='84%'><input type='text' name='destination' size='30'></td>
        </tr>
        <tr>
          <td width='16%'>Breite in Pixel:</td>
          <td width='84%'><input type='text' name='width' size='4'></td>
        </tr>
        <tr>
          <td width='16%'>Höhe in Pixel:</td>
          <td width='84%'><input type='text' name='height' size='4'></td>
        </tr>
          <tr>
          <td width='16%'>Qualität:</td>
          <td width='84%'><input type='text' name='quality' size='4' value='100'></td>
        </tr>
        <tr>
          <td width='16%'>Proportional:</td>
          <td width='84%'><input type='checkbox' name='fixed' checked></td>
        </tr>
        <tr>
          <td width='16%'></td>
          <td width='84%'></td>
        </tr>
        <tr>
          <td width='16%'></td>
          <td width='84%'><input type='submit' name='submit' value='Abschicken'</td>
        </tr>
      </table>
      </form>
        </center>
      </div>
<?php
   }
   else
   {
      // Bei Timeout-Problemen den Wert erhöhen
      ini_set("max_execution_time", "3000");

      $source = $_POST["source"];
      $dest   = $_POST["destination"];
      $width  = $_POST["width"];
      $height = $_POST["height"];
      $quality = $_POST["quality"];

      if (isset($_POST["fixed"]))
        $fixed   = true;
      else
        $fixed   = false;

      if (! strlen ($source))
      { 
         echo "Kein Quellverzeichnis";
         exit;
      }

      if (! strlen ($dest))
      { 
         echo "Kein Zielverzeichnis";
         exit;
      }

      if (! strlen ($width) && ! strlen ($height))
      { 
         echo "Keine Größen angegeben";
         exit;
      }

      if ($fixed)
      {
         if (strlen ($width))
            $height = 0;
          else if (strlen ($height))
            $widht = 0;
      }

      include_once("./functions.inc.php");

      $data = getImagesFromPath($source);

      if (! file_exists($dest))
      {
         if ( ! mkdir ($dest, "0777"))
         {
           echo "Verzeichnis $dest konnte nicht angelegt werden";
           exit;
         }
      }
      foreach($data as $name)
      {
          $in  = $source . "/" . $name;
          $out = $dest . "/" . $name;
          $out = str_replace(" ", "_", $out);
          $ret = resizeImage($in, $out, $width, $height, $quality);
          if ($ret)
            echo "Grafik $out erzeugt<br>\n";
          else
            echo "<font color='#FF0000'>Grafik $out konnte nicht erzeugt werden</font><br>\n";
      }

   }
?>
</body>
</html>

Alles anzeigen

functions.inc.php

PHP

<?php
  function getImagesFromPath($path)
  { 
    $result = array(); 

    $handle=opendir($path); 

    while ($file = readdir ($handle)) 
    { 
       if ($file != "." && $file != "..") 
       { 
          if (! is_dir($file)) 
          { 
            $tmp = strtolower($file);
            $sub = substr($tmp, -4); 
            if ($sub == ".png" || $sub == ".jpg" || $sub == ".gif") 
               $result[] = $file; 
          }
       } 
    } 

    return $result; 
  } 

  function resizeImage($file_name_src, $file_name_dest, $width = 0, $height = 0, $quality = 100)
  {

   if (file_exists($file_name_src)  && isset($file_name_dest))
   {
       if ($width == 0 && $height == 0)
         return false;
       
       $file_name_dest = strtolower($file_name_dest);
       
       $est_src = pathinfo(strtolower($file_name_src));
       $est_dest = pathinfo(strtolower($file_name_dest));

       $size = getimagesize($file_name_src);

       if ($height && ! $width)
       {
         $h = number_format($height, 0, ',', '');
         $w = number_format(($size[0]/$size[1])*$height,0,',','');
       }
       else if (! $height && $width)
       {
         $w = number_format($width, 0, ',', '');
         $h = number_format(($size[1]/$size[0])*$width,0,',','');
       }
       else
       {
         $h = number_format($height, 0, ',', '');
         $w = number_format($width, 0, ',', '');
       }

       if ($est_dest['extension'] == "gif" || $est_dest['extension'] == "jpg" || $est_dest['extension'] == "png")
       {
           $dest = imagecreatetruecolor($w, $h);
           imageantialias($dest, TRUE);
       }
       else
       {
           return FALSE;
       }

       switch($size[2])
       {
       case 1:      //GIF
           $src = imagecreatefromgif($file_name_src);
           break;
       case 2:      //JPEG
           $src = imagecreatefromjpeg($file_name_src);
           break;
       case 3:      //PNG
           $src = imagecreatefrompng($file_name_src);
           break;
       default:
           return FALSE;
           break;
       }

       imagecopyresampled($dest, $src, 0, 0, 0, 0, $w, $h, $size[0], $size[1]);
       
       switch($size[2])
       {
       case 1:
            imagegif($dest,$file_name_dest);
            break;
       case 2:
           imagejpeg($dest,$file_name_dest, $quality);
           break;
       case 3:
           imagepng($dest,$file_name_dest);
       }
       return TRUE;
   }
   return FALSE;
}

Alles anzeigen

Es sei gesagt, dass dies eines meiner ersten Scripte war, nicht schön, funktioniert aber. Bei vielen und großen Bilder muss man eventuell max_execution_time und memory_limit von PHP erhöhen.

Spider67

Vielen Dank Bandit. Werde das mal bei meinen Images versuchen.

Spider67

Eine Frage noch zu den Images (Images Ordner - die Pfeile vor und zurück bzw. close): Müssen die im selben Ordner gespeichert werden wie die CSS Datei oder wie die js Datei?

Und welche Dateien muss ich grundsätzlich verwenden, die aus dem dist ordner oder die aus dem src Ordner?

Bandit

Ich finde dich echt unglaublich!!! Kannst du dich auch mal selber um so einen Kleinkram kümmern!??!?!

Man sehe sich die CSS-Datei an, darin steht u.a.

Code

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
}

Da sollte einem etwas auffallen!

Und dann kann man sich auch mal das Beispiel ansehen, da findet man u.a.

Code

<link rel="stylesheet" href="../dist/css/lightbox.min.css">

So einfach hättest du das selber heraus finden können! Warum machst du das nicht???

Spider67

Na schau mal Du Kasperl: Jetzt hast Du mir - obwohl Du gar nicht wolltest - doch geholfen.

Du bist echt ein armes Würstchen, wenn du scheinbar außer diesem Forum keine Kontakte hast.

Aber wenn man solche ComputerTypen wie dich näher betrachtet oder kennt, wundert einen das natürlich nicht.

Armer Kasperl, mehr kann ich dazu nicht sagen - du wiederholst Dich sooft, aber das fällt Dir natürlich nicht auf.

Bandit

Ich muss mich bei dir auch immer wiederholen, weil du dir ständig alles vorkauen lässt, anstatt ein Minimum an Eigeninitiative zu zeigen.

Und den "Kasperl" kannst du dir schenken, besonders dann, wenn man so unfähig wie du ist.

Spider67

Na sind wir verärgert, du Nerd?

Bandit

Trolle können mit nicht verärgern, weil sie unfähig sind und das selbst noch nicht mal wissen.

Gastl

Der Troll erreicht genau das, was er will. Ich verstehe dich nicht. Am ausgestreckten Arm verhungern lassen. Bist selber schuld.

Bandit

Zitat von Gastl

Am ausgestreckten Arm verhungern lassen.

Stimmt eigentlich, aber bei solchen Leuten juckt es in den Fingern. Das gnadenlose Ausnutzen kostenloser Hilfe ohne einen Hauch von Eigeninitiative geht mir auf den Nerv.

Arne Drews

Spider67

Mäßige Dein Verhalten gegenüber anderen Community-Mitgliedern. Gerade zu denen, die Dir selbst bei offensichtlicher Hoffnungslosigkeit noch Lösungen liefern, solltest Du freundlicher sein!

[MOD: geschossen, User verwarnt]

Bildergalerie

Arne Drews 12. Januar 2020 um 11:38

Ähnliche Themen

Layout mit Grid

Hintergrundbild verändern

Vertikal zentrieren mit CSS

Bildergalerie unter Navigation

Bildergalerie, Focus in der Mitte

Bildergalerie erstellen