Bilder aus Verzeichniss und Unterverzeichniss auslesen

Hauer

Hallo, ich habe hier ein JavaScript, das die Bilder in einer Zeitleiste anzeigt.

Nun möchte ich dieses Script etwas anpassen.

In dem Bereich, wo die Dateien angegeben sind, möchte ich Bilder aus einem Verzeichniss (galerie) und dessen Unterverzeichnissen generieren lassen.

Wie kann man das am besten lösen?

Danke.

Code

<script type="text/javascript">




var sliderwidth="760px"


var sliderheight="145px"


var slidespeed=1


slidebgcolor="#000000"




var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="images/pictures/001.jpg" rel="lightbox" title="Studioansicht 1"><img src="images/thumbnails/001.jpg" border=1></a>'
leftrightslide[1]='<a href="images/pictures/002.jpg" rel="lightbox" title="Studioansicht 2"><img src="images/thumbnails/002.jpg" border=1></a>'
leftrightslide[2]='<a href="images/pictures/003.jpg" rel="lightbox" title="Studioansicht 3"><img src="images/thumbnails/003.jpg" border=1></a>'
leftrightslide[3]='<a href="images/pictures/004.jpg" rel="lightbox" title="Arbeitsbeispiel"><img src="images/thumbnails/004.jpg" border=1></a>'
leftrightslide[4]='<a href="images/pictures/005.jpg" rel="lightbox" title="Arbeitsbeispiel"><img src="images/thumbnails/005.jpg" border=1></a>'


var imagegap=" "




var slideshowgap=5




var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide


function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup


function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"


if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"


}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap


if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}




if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Alles anzeigen

Grevas

Dafür brauchst du PHP. JavaScript kann keine Verzeichnisse auf dem Server durchsuchen.

Dodo

Am besten nimmst du ein PHP-Script, das du wie folgt einbindest:

HTML

<script type="text/javascript" src="images.php"></script>

Dann erstellst du das Script "images.php" und liest mittels glob() oder ähnlichem die Verzeichnisse ein.
Das Script sollte mit folgenden Zeilen beginnen:

PHP

<?php
        header('Content-Type:text/javascript; charset=utf-8');
//...
?>

Und dann erstellst du einfach mit PHP keinen HTML-Code, sondern ein JavaScript-Array.

Hauer

Hi und vielen Dank für die Hilfen.

Ich habe heute mal wieder etwas Zeit und habe ein kleines Script entworfen. Erst einmal habe ich das Auslesen auf ein Verzeichnis beschränkt, um überhaupt mal zu sehen, wie weit ich komme.

2 Probleme habe ich in meinem Script.

1. Es werden nur zwei Bilder statt der 5 Angezeigt und das sind auch noch die Selben.
2. Das soll dann nach dem 1 Problem gelöst werden, wie ich es nun hinbekomme, das er aus dem Unterverzeichniss /upload/ auf alle weiteren Unterverzeichnisse zugreift und die Bilder anzeigt.

Dank vorab für die Unterstützung.

Hier mal mein Skript:

PHP

<?
 $verzeichnis = "galerie/upload/StyleRace 2009/";
 $handle = openDir($verzeichnis);
 while ($datei = readDir($handle)) {

   if ($datei != "." && $datei != ".." && !is_dir($datei)) {

    if (strstr($datei, ".gif") ||
      strstr($datei, ".png") ||
      strstr($datei, ".jpg")) {

      $verzeichnis_datei = $verzeichnis . $datei;

      $info = getImageSize($verzeichnis_datei);

      $pictures = $verzeichnis_datei;
                }
                  }
         }
   closeDir($handle); 
?>

Alles anzeigen

Die Enbindung in das JavaScript:

PHP

leftrightslide[0]='<a href="galerie.php"><img src="<?php echo $pictures?>" height=160 border=0></a>'

Dodo

Ganz einfach:
Lies mit glob() einmal alle Unterverzeichnisse und einmal alle Dateien aus.
Bei den Unterverzeichnissen kannst du das dann rekursiv wiederholen.

http://at2.php.net/manual/de/function.glob.php

PHP

$files = glob('*');
$directories = glob('', GLOB_ONLYDIR);

synaptic

rekursion ist hier das zauberwort...
du musst auslesen welche teile in nem verzeichnis sind, wenn des ding unterverzeichnisse hat, musste die auch auslesen mit der gleichen funktion.

dann haste beim einbinden nen semikolon und nen leerzeichen vergessen
was soll $info und $pictures machen? da haste ne zuordnung aber machst nix damit.

kack telefon.. jetzt war dodo schneller^^ und ausführlicher

jojo87

ich verweis mal zusätzlich noch auf diesen Thread.
Da findest du in der index.php auch ein Beispiel für Rekursion (Funktion getCtrlFiles()).

Hauer

Puhhh, hab ich mir irgendwie einfacher vorgestellt

So nach langem probieren hab ich erst mal genug, schaue mir das in den Tagen nochmal etwas intensiver an. Irgendwie habe ich das wohl noch nicht ganz verstanden.

Das ist der letzte Stand, der aber nichts ausgibt, ich poste ihn aber trotzdem mal:

PHP

<?
   $n=0;
  $dir ='/galerie/upload';
   while($dirs = glob($dir . '/*', GLOB_ONLYDIR)) {
     $dir .= '/*';
      if(!$d) { 
        $d=$dirs;
         } else {
            $d[$n]=$dirs;
             }
      $n++;

    $handle = openDir($dirs);
    while ($files = readDir($handle)) {

    $files = glob('*'); 
               }
    closeDir($handle); 
              }
?>

Alles anzeigen

Dodo

Hast du dir die Dokumentation von glob() angesehen? -.-
Das gibt immer ein Array zurück.
Du hängst bestimmt in einer Endlosschleife fest, oder?

Hauer

Hallo !

So habe es nun geschafft, die Dateien als allen Verzeichnissen auszulesen.

Nun habe ich noch Probleme bei dem JavaScript.

Das Verhalten ist wie bereits geschrieben, dass er immer nur 1 Datei anzeigt und dann dieselbe nachläd.

Wie kriege ich jetzt die Dateien da richtig rein ?

PHP

<?php


function all_files($dir)
{
    $files = Array();
    $file_tmp= glob($dir.'*',GLOB_MARK | GLOB_NOSORT);


    foreach($file_tmp as $item){
        if(substr($item,-1)!=DIRECTORY_SEPARATOR)
            $files[] = $item;
        else
            $files = array_merge($files,all_files($item));
    }


    return $files;
}


$file = all_files("galerie/upload/");


foreach ($file as $pics) {

    echo $pics;

                              }
?>

Alles anzeigen

Das Slide JavaScript:

PHP

<script type="text/javascript">


var sliderwidth="700px"
var sliderheight="120px"
var slidespeed=1
slidebgcolor="#000000"


var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="galerie.php"><img src="<?php echo $pics;?>" height=160 border=0></a>'


var imagegap=" "
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide


function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup


function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"


if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"


}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap


if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}




if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

Alles anzeigen

synaptic

also die zeilen abzuschliessen is wohl eine grundlage die man in keiner programmier- oder scriptsprache braucht.
nix is eingerückt oder gar leserlich..

also ich für meinen teil verspüre nich im geringsten die lust mir das anzusehen

Hauer

Sorry, das ist ja nur halb richtig !

Das PHP Script was ich geschrieben habe ist eingerückt, nur halt leider das JavaScript nicht, da ich es selber nicht geschrieben habe und es bereits so war.

Aber wenn es für dich dann besser ist, mache ich mich halt nochmal ran, das Script zu formatieren, kein Ding.

synaptic

und achte mal auf das was deine php-file ausgibt...
ich denk du willst einige ordner und unterordner auslesen.. wieso haste dann ein image wo du die php-file als echo ausgibst?

Hauer

Ja, ich will die Verzeichnisse auslesen und alle Bilder die er findet in das Slide integrieren !

Hauer

So, ich hoffe es ist so besser zu lesen

PHP

<script type="text/javascript">


var sliderwidth="700px"
var sliderheight="120px"
var slidespeed=1
slidebgcolor="#000000"


var leftrightslide=new Array()
var finaSorrSorry, daslslide=''
leftrightslide[0]='<a href="galerie.php"><img src="<?php echo $pics; ?>" height=120 border=0></a>'
var imagegap=" "
var slideshowgap=5




var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide


function fillup(){
        if (iedom){
                    cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
                    cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
                    cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
                    actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
                    cross_slide2.style.left=actualwidth+slideshowgap+"px"
                }
                    else if (document.layers){
                                                ns_slide=document.ns_slidemenu.document.ns_slidemenu2
                                                ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
                                                ns_slide.document.write(leftrightslide)
                                                ns_slide.document.close()
                                                actualwidth=ns_slide.document.width
                                                ns_slide2.left=actualwidth+slideshowgap
                                                ns_slide2.document.write(leftrightslide)
                                                ns_slide2.document.close()
                                            }
                                                lefttime=setInterval("slideleft()",30)
                }


                window.onload=fillup


function slideleft(){
                        if (iedom){
                                    if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
                                    cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
                                    else
                                    cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"


                                    if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
                                    cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
                                    else
                                    cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"


                                }
                                    else if (document.layers){
                                                                if (ns_slide.left>(actualwidth*(-1)+8))
                                                                ns_slide.left-=copyspeed
                                                                else
                                                                ns_slide.left=ns_slide2.left+actualwidth+slideshowgap


                                                                if (ns_slide2.left>(actualwidth*(-1)+8))
                                                                ns_slide2.left-=copyspeed
                                                                else
                                                                ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
                                                            }
                    }


if (iedom||document.layers){
                            with (document){
                                            document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
                                            if (iedom){
                                                        write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
                                                        write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
                                                        write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
                                                        write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
                                                        write('</div></div>')
                                                        }
                                                            else if (document.layers){
                                                                                        write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
                                                                                        write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
                                                                                        write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
                                                                                        write('</ilayer>')
                                                                                    }
                                                document.write('</td></table>')
                                            }
                            }
</script>

Alles anzeigen

Dodo

Ich hab bereits geschreiben, wie du das von PHP zu JavaScript bringst.

Zitat von Dodo
Am besten nimmst du ein PHP-Script, das du wie folgt einbindest:
HTML
<script type="text/javascript" src="images.php"></script>
Dann erstellst du das Script "images.php" und liest mittels glob() oder ähnlichem die Verzeichnisse ein.
Das Script sollte mit folgenden Zeilen beginnen:
PHP
<?php
        header('Content-Type:text/javascript; charset=utf-8');
//...
?>
Und dann erstellst du einfach mit PHP keinen HTML-Code, sondern ein JavaScript-Array.

Hauer

Hallo Dodo,

ich habe eine index.php in der das Slide-javascript läuft.

nur mal so zum Verständnis:

Das mit der images.php ist soweit klar, dan binde ich in den header der index.php das javascript images.php ein.

Aber das erstellen des Javascript-Array ist mir irgendwie unklar.

1. Wo soll es hin, an den Angang des Slide Javascript?, also <script Type="text/javascript"> <?php ... ?> ...... </script>
2. Wie erstelle ich das Array in Bezug auf die image.php, wie binde ich diese in das ein JavaScript-array ein, ich dachte es ist bereits ein array?

Danke.

Dodo

Du gibst mit PHP einfach einen JavaScript-Code aus und keinen HTML-Code!

PHP

<?php


        // bilder.php


        header('Content-Type:text/javascript; charset=utf-8');
        echo "var bilder = new Array();";


        // ...


?>

Alles anzeigen

Und das bindest du wie oben beschrieben ein.

Hauer

Irgendwie bekomme ich keine Ausbabe:

Die images.php sieht nun so aus:

PHP

<?php
        header('Content-Type:text/javascript; charset=utf-8');

        error_reporting(E_ALL); #zeig alle Fehler 
        ini_set('display_errors', '1');

        function all_files($dir)
        {
            $files = Array();
            $file_tmp= glob($dir.'*',GLOB_MARK | GLOB_NOSORT);

            foreach($file_tmp as $item){
                                        if(substr($item,-1)!=DIRECTORY_SEPARATOR)
                                            $files[] = $item;
                                        else
                                            $files = array_merge($files,all_files($item));
                                        }

            return $files;
        }

        $file = all_files("galerie/upload/");

        foreach ($file as $bilder) {

                                    echo "var bilder = new Array(" . $bilder . ");"; 

                                    }
?>

Alles anzeigen

Und der der betreffende Teil des javascripts in der index.php so:

Code

var leftrightslide=new Array()
var finaSorrSorry, daslslide=''
leftrightslide[0]='<a href="galerie.php"><img src="'bilder'" height=120 border=0></a>'
var imagegap=" "
var slideshowgap=5

synaptic

so schwer kann das doch gar nich sein!!

PHP

foreach ($file as $bilder) {

       echo "var bilder = new Array(" . $bilder . ");"; 

 }

is doch schon wieder murks, weil du dann jedes mal das array bilder neu deklarierst!
machst du dir eigentlich gedanken bei dem was du schreibst? oder übernimmst du nur codefetzen und versuchst mit copy und paste zu entwickeln?

for der foreach deklarierst du das array und in php nen counter (es ginge auch ohne counter, aber dafür halte ich dich nicht für erfahren genug!)
im foreach gehste daher und baust nen eintrag fürs javascript-array und die positionen im array sind die werte vom counter, danach inkrementierst du den counter.

PHP

$counter = 0;
echo "var bilder = new Array();";
 foreach ($file as $bilder) {

        echo "bilder['.$counter.']=\"" . $bilder . ");\";"; 
 }

ungetestet!
das ergebnis sollte im js so aussehen:

var bilder = new Array();
bilder[0] = "pfadzumbild/bild.jpg";
bilder[1] = "pfadzumbild/bild1.jpg";
bilder[2] = "pfadzumbild/bild2.jpg";

Tags