Tutorial Bilder Skript - Verzeichnisse auslesen - von sevenx.de

Mit diesem PHP-Skript ist es möglich sämtliche Bilder aus einem (oder mehreren) Verzeichnissen vom Server auszulesen. Die Bilder werden automatisch und alphabetisch sortiert als Miniaturen dargestellt und in einer Lytebox geöffnet.

Zum besseren Verständnis solltet Ihr Euch von der Seite von sevenx.de die Skripte downloaden.

Nach dem Download findet Ihr etliche Beispiele, wie man Verzeichnisse und Bilder auslesen kann. Ich beschreibe hier die Variante mit der Lytebox, die ich hier in NOF 2013 eingebaut habe. Die Anordnung der .js Dateien kann in anderen NOF-Versionen abweichen.

Dafür habe ich mir folgendes Verzeichnis (zur Anzeige der Lytebox) aus dem Download in das Verzeichnis kopiert, in dem ich meine NOF-Seite zur Anzeige der Bilder erstellt habe, damit ich keine Pfadangaben ändern muss.

  • jquery-lightbox

Die CSS, die Verlinkungen zu den .js Dateien und das PHP-Skript habe ich mir aus der Beispielseite

  • images_lightbox.php

heraus kopiert. Öffnet diese mit z.B. Eurem Windows-Editor. Hier meine CSS, die Ihr natürlich beliebig anpassen könnt und in die HTML der Seite einfügt:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen

<style type="text/css">
   ul#galerie {
   padding:0;
   margin:0;
   list-style-type:none;
   font-family:Arial, Helvetica, sans-serif;
}
ul#galerie li{
   padding: 3px;
   background-color:#ebebeb;
   border:1px solid #CCC;
   float:left;
   margin:0 10px 10px 0;
}
ul#galerie li:hover{
   border:1px solid #888888;
}
ul#galerie li span{
   display:block;
   text-align:center;
   font-size:10px;
}
ul#galerie li a img{
   border:none;
}
</style>

Um einen Konflikt mit den Javascript und jQuery Dateien von NOF zu vermeiden, müssen diese Verlinkungen unter die NOF-Skripte und auch die Verlinkung zur Datei “navbars.js” für die Navigation von NOF muss erneut eingefügt werden, da sonst die Navigationsleiste nicht angezeigt werden würde. Insofern habe ich die Verlinkungen am “Beginn des Haupttextes” (<BODY>) eingefügt:

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Beginn des Haupttextes” einfügen

    <!-- include jQuery library -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-lightbox/js/jquery.lightbox-0.5.js"></script>
    <link href="jquery-lightbox/css/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="../navbars.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
       $('#galerie a').lightBox();
    });
    </script> 

Zur Anzeige des PHP-Skriptes ist es natürlich notwendig die Seite auf die Dateierweiterung .php umzustellen. Hier aus meinem Verzeichnis “images”.

Für das PHP Skript unten, habe ich mir ein Textfeld aufgezogen und das Skript in den HTML Code-Editor dieses Texfeldes kopiert.

> Fenster “Text-Eigenschaften” > mittlere Button oben “Text” > Button “HTML” > Code einfügen

<ul id="galerie">
   <?php
      $ordner = "images";
      $allebilder = scandir($ordner);
      foreach ($allebilder as $bild) {
         $bildinfo = pathinfo($ordner."/".$bild);
         $size = ceil(filesize($ordner."/".$bild)/1024);
         if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
        ?>
      <li>
           <a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
           <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>
           <span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
      </li>
   <?php
         };
       };
   ?>
</ul>

Bemerkung:

  • Für den richtigen z-index der Navigations-Leiste von NOF, habe ich diese auf einen extra Layout-Bereich gelegt, den ich auf die feste Seitenausgabe HTML 4.01 gestellt habe.

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik