Slider Skript - Verzeichnisse auslesen - von sevenx.de

Diese Bilder werden in meinem Beispiel aus einem Verzeichnis automatisch ausgelesen. Es können also beliebig viele Bilder in ein Verzeichnis hinzugefügt werden, ohne die NOF-Seite ändern zu müssen. Die Anzeige der Bilder erfolgt alphabetisch sortiert und automatisch in diesem Slider.

Verzeichnis “panorama” - Fotos von: bilder.n3po.com

  • Vorschau
  • Vorschau
  • Vorschau
  • Vorschau
  • Vorschau
  • Vorschau
 

Der Einbau erfolgt ebenso wie bei meinem TUT Bilder.

Für die Javascript Dateien habe ich mir folgendes Verzeichnis (zur Anzeige des Sliders) aus dem Download in das Verzeichnis kopiert, in dem ich meine NOF Seite zur Anzeige des Sliders erstellt habe, damit ich keine Pfadangaben ändern muss.

  • js
    mit den beiden Dateien:
    • jquery.easing.1.3.js
    • jquery.slideviewer.1.2.js

Hier die CSS:

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

<style type="text/css">
/*preload classes*/
.svw {width: 50px; height: 20px; background: #888888;}
.svw ul {position: relative; left: -999em;} /*core classes*/
.stripViewer { position: relative; overflow: hidden; border: 3px solid #888888; margin: 0 0 1px 0; }
.stripViewer ul { /* this is your UL of images */ margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%;
 list-style-type: none; }
.stripViewer ul li { float:left; }
.stripTransmitter { overflow: auto; width: 1%; }
.stripTransmitter ul { margin: 0; padding: 0; position: relative; list-style-type: none; }
.stripTransmitter ul li{ width: 20px; float:left; margin: 0 1px 1px 0; }
.stripTransmitter a{ font: bold 10px Verdana, Arial; text-align: center; line-height: 22px; background: #888888; color: #fff;
 text-decoration: none; display: block; }
.stripTransmitter a:hover, a.current{ background: #fff; color: #888888; }
</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

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <!-- include plugins -->
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/jquery.slideviewer.1.2.js"></script>
    <script type="text/javascript" src="../navbars.js"></script>
    <script type="text/javascript">
    $(window).bind("load", function() { $("div#galerie").slideView() });
    </script>

Zur Anzeige des PHP-Skriptes ist es natürlich notwendig die Seite auf die Dateierweiterung .php umzustellen. Hier aus meinem Verzeichnis “panorama”, welches ein Verzeichnis höher ../ in meinem Verzeichnis “Bilder” liegt. Achtet also auf die korrekte relative Pfadangabe.

Die verwendeten Fotos sollten beim Slider alle die gleiche Größe haben.

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

<div id="galerie" class="svw">
   <ul>
   <?php
       $ordner = "../Bilder/panorama";
       $allebilder = scandir($ordner);
       foreach ($allebilder as $bild) {
         $bildinfo = pathinfo($ordner."/".$bild);
         if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
         ?>
         <li><img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" alt="Vorschau" /></li>
         <?php
         };
       };
   ?>     
   </ul>
</div>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik