folder informatie via javascript

Status
Niet open voor verdere reacties.
S

SHendrikx

Gebruiker
Lid geworden
21 nov 2007
Berichten
5
goedendag
ik ben bezig met het maken van een internet site en wil random afbeeldingen vertonen als een thumbnail. Maar ik wil niet een vaste waarde van aantal thumbnails geven die in een bepaalde folder staan. Ik wil een functie maken die het aantal thumbnails in een folder in een array zet. De return parameter is een random gekozen afbeelding in de gecreerde array.

Nu ben ik met de volgende functie bezig maar kom er niet uit.
Code: 
<script language="javascript" type="text/javascript">
function getImageSrc(subject)
{
     var folder       = new String("./" + subject + "/thumbnails");
     var directory  = new Dir(folder);
     var children   = new array();
     children        = directory.list();
     return (folder + "/" + string[ Math.round(Math.random()*(children.length-1))+1 ]);
} 
</script>
Kan iemand me op weg helpen?

vriendelijk bedankt, Stephan
 
Laatst bewerkt door een moderator:
Op elke vraag altijd een antwoord!

goedendag
ik ben bezig met het maken van een internet site en wil random afbeeldingen vertonen als een thumbnail. Maar ik wil niet een vaste waarde van aantal thumbnails geven die in een bepaalde folder staan. Ik wil een functie maken die het aantal thumbnails in een folder in een array zet. De return parameter is een random gekozen afbeelding in de gecreerde array.

Nu ben ik met de volgende functie bezig maar kom er niet uit.
Code: 
<script language="javascript" type="text/javascript">
function getImageSrc(subject)
{
var folder = new String("./" + subject + "/thumbnails");
var directory = new Dir(folder);
var children = new array();
children = directory.list();
return (folder + "/" + string[ Math.round(Math.random()*(children.length-1))+1 ]);
} 
</script>
Kan iemand me op weg helpen?

vriendelijk bedankt, Stephan
Klik om te vergroten...

Ik denk het wel.
Als ik snap wat je bedoelt tenminste. Ik zat zo te kijken en misschien is dit het wel voor je, ik heb me eigen site al en had dit eerst in gedachten:


HEAD-GEDEELTE:
HTML: 
<!-- De waarde bij top en left bepaalt de plaats van de grote afbeelding -->
<style type='text/css'>
.plaatje
{
	position:absolute;
	top:200;
	left:328;
	visibility:hidden;
}
</style>

<script type="text/javascript">
browsertest=navigator.appName
versietest=navigator.appVersion
var version45=(versietest.indexOf("4.")!=-1||versietest.indexOf("5.")!=-1)
var NS=(browsertest.indexOf("Netscape")!=-1 && version45)
var IE=(browsertest.indexOf("Explorer")!=-1 && version45)
if(!NS&&!IE)alert("Je hebt een browser nodig van het type 4 of hoger om deze toepassing te kunnen gebruiken.")
if(IE){var hide="hidden"; var show="visible"}
if(NS){var hide="hide"; var show="show"}
</script>

<script type="text/javascript">

<!-- Hier geef je elke afbeelding een ID-naam -->
var AfbeeldingenArray = new Array()
AfbeeldingenArray[0]='f1'
AfbeeldingenArray[1]='f2'
AfbeeldingenArray[2]='f3'
AfbeeldingenArray[3]='f4'
AfbeeldingenArray[4]='f5'
var AantalAfbeeldingen=AfbeeldingenArray.length

function tonen(divId){
for(i=0;i<AantalAfbeeldingen;i++){
if(AfbeeldingenArray[i].indexOf(divId)==0){
if(IE)eval('document.all.'+divId+'.style.visibility=show');
if(NS)document.eval(divId).visibility=show;
AfbeeldingenArray[i]=divId+"+1";
break}}}

function verbergen(divId){
for(i=0;i<AantalAfbeeldingen;i++){
if(AfbeeldingenArray[i].indexOf(divId)==0){
if(IE)eval('document.all.'+divId+'.style.visibility=hide');
if(NS)document.eval(divId).visibility=hide;
AfbeeldingenArray[i]=divId;
break}}}

function AllesVerbergen(){
for(i=0;i<AantalAfbeeldingen;i++){
if(AfbeeldingenArray[i].indexOf("+1")>0){
divId=AfbeeldingenArray[i].substr(0,AfbeeldingenArray[i].length-2);
if(IE)eval('document.all.'+divId+'.style.visibility=hide');
if(NS)document.eval(divId).visibility=hide;
AfbeeldingenArray[i]=divId;
}}}

function Toon(dezeAfbeelding){AllesVerbergen();tonen(dezeAfbeelding)}

</script>


BODY-GEDEELTE
HTML: 
<center>
<img src="../pics/foto1.jpg" width= 40 height= 30 onMouseOver="Toon('f1')">   
<img src="../pics/foto2.jpg" width= 40 height= 30 onMouseOver="Toon('f2')">   
<img src="../pics/foto3.jpg" width= 40 height= 30 onMouseOver="Toon('f3')">   
<img src="../pics/foto4.jpg" width= 40 height= 30 onMouseOver="Toon('f4')">   
<img src="../pics/foto5.jpg" width= 40 height= 30 onMouseOver="Toon('f5')">
</center>

<div id="f1" class="plaatje">
	<div id="f1" class="plaatje">
	<img src="../pics/foto1.jpg" onload="Toon('f1')"><br>
	<center>Als antwoord op een vaak terugkerende vraag.</center>
</div><br>
	<center>Hier komt een begeleidende tekst bij foto 1.<br>
	Deze tekst kun je ook weglaten.</center>
</div>

<div id="f2" class="plaatje">
	<img src="../pics/foto2.jpg"><br>
	<center>Deze tekst hoort bij foto2.</center>
</div>

<div id="f3" class="plaatje">
	<img src="../pics/foto3.jpg"><br>
	<center>Een tekst bij foto 3.</center>
</div>

<div id="f4" class="plaatje">
	<img src="../pics/foto4.jpg"><br>
	<center>Uitleg bij foto 4.</center>
</div>

<div id="f5" class="plaatje">
	<img src="../pics/foto5.jpg"><br>
	<center>Deze tekst en uitleg hoort bij foto 5.</center>
</div>

Hoop dat dit het antwoord op je vraag is...

met vriendelijke groet,
NME4U
 
Laatst bewerkt door een moderator:
dank je wel voor de snelle hulp en ik zal het een en ander proberen

merci, Stephan
 
Je hebt het over folder informatie, het uitlezen van een map, en dat kan wel met javascript via het filesystemobject maar dan alleen op je eigen harde schijf. :confused:

Voor een website kun je wel php gebruiken om een map uit te lezen:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Willekeurige foto</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 070228 ;)
    var photo = new Array(
<?php
 echo "     // php start\r\n";
 $d = dir("./image");
 while (false !== ($entry = $d->read())) {
  if (ereg("\.(jpg|gif|png|jpeg|bmp)$", $entry)) {
   echo "     'image/".$entry."',\r\n";
   };
  };
 $d->close();
 echo "     // php einde\r\n";
?>
     '');
    function randomPhoto() {
     var nr = Math.floor(Math.random() * (photo.length - 1));
     document.getElementById('display').src = photo[nr];
     };
   // -->
  </script>
 </head>
 <body onload="randomPhoto()">
  <input type="button" value="Willekeurige foto" onclick="randomPhoto()"><br>
  <img id="display">
 </body>
</html>
Dat geeft een willekeurige foto weer uit de submap image.

Maar het is makkelijk aan te passen aan een andere map, of te filteren op naam (bv alleen plaatjes met _th in de naam). :)


Vr.Gr. Egel.
 
Dit ziet er uit als wat ik zoek.
Ik ga hier meteen na het werk mee aan de slag en alvast bedankt voor de hulp

Stephan
 
beste Egel.

ik heb je code uitgeprobeerd maar ik krijg foutmeldingen en geen afbeeldingen te zien.
Wat ik gedaan heb is je code in een html bestand gezet, een map 'image' aangemaakt waar ook het html bestand staat, maar ik krijg geen afbeeldingen te zien in de explorer.
Moet ik soms met aparte zaken nog rekening houden of zou het zo meteen moeten werken?

Groeten van Stephan
 
Bij dit script, moeten de html en de map image in dezelfde map staan, de plaatjes staan 1 map 'dieper'.

Als je in de broncode kijkt, zie je dan nog het php gedeelte nog staan? Zo ja dan moet je de html pagina waarschijnlijk de extensie .php geven.

Als het goed is zie je in de broncode iets als:
PHP: 
    var photo = new Array(
     // php start
     'image/foto_01.jpg';
     'image/foto_02.jpg';
     // php einde
     '');
Niet alle websites ondersteunen php, dat is nog wel een voorwaarde om het script te kunnen gebruiken die ik vergeten was te vermelden. :)


Vr.Gr. Egel.
 
Beste Egel,

Ik heb inderdaad de file de .php extensie gegeven maar daarbij rijst de volgende vraag.
Is het nodig om lokaal een php server te installeren of is de enige mogelijkheid het bij de provider te proberen?
Ik heb inderdaad de file en afbeeldingen geplaatst zoals opgegeven maar het blijkt dan niet te werken.

Worden de onderstaande files
- image/foto_01.jpg';
- 'image/foto_02.jpg';
in de code gegenereerd of moeten deze handmatig worden toegevoegd. Het is namelijk zo dat ik niet vooraf de inhoud van een bepaalde map wil includen in de code zodat bij het toevoegen van een afbeelding, deze meteen meegenomen tijdens runnen van de files.

groeten van Stephan
 
SHendrikx zei:
Ik heb inderdaad de file de .php extensie gegeven maar daarbij rijst de volgende vraag.
Is het nodig om lokaal een php server te installeren of is de enige mogelijkheid het bij de provider te proberen?
Klik om te vergroten...
Je kan lokaal een php-server installeren maar dat lijkt me veel moeite als dit het enigste is dat je met php wilt doen.

Zonder die server kan je het inderdaad alleen bij je provider testen. Dat is een kwestie van je ftp-programma openen, php aanpassen in wordpad, bewaren (ctrl-s), naar je site slepen (uploaden) en vernieuwen klikken in je browser (F5). :)
SHendrikx zei:
Worden de onderstaande files
- image/foto_01.jpg';
- 'image/foto_02.jpg';
in de code gegenereerd of moeten deze handmatig worden toegevoegd.
Klik om te vergroten...
Die worden in de code gegenereerd inderdaad, alle plaatjes uit de map image verschijnen daar.

Als je dit als test.php op je website plaatst:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>test.php</title>
  <meta http-equiv="Content-Language" content="nl">
 </head>
 <body>
<?php
 echo "  Test geslaagd!\r\n";
?>
 </body>
</html>
krijg je dan 'Test geslaagd!' te zien? (Anders werkt php niet. :()


Dit script geeft 1 gelinkte thumb weer uit de map image:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>1 gelinkte thumb uit de submap image</title>
  <meta http-equiv="Content-Language" content="nl">
 </head>
 <body>
<?php
 // Egel 071205 ;)
 $a = array();
 $d = dir("./image");
 while (false !== ($entry = $d->read())) {
  if (ereg("_th\.(jpg|gif|png)$",$entry)) {
   $a[] = $entry;
   };
  };
 $d->close();
 $thumb = $a[rand(0,count($a)-1)];
 $photo = str_replace("_th","",$thumb);
 echo "  <a href=\"image/".$photo."\" target=\"_blank\"><img src=\"image/".$thumb."\" border=\"0\" /></a>\r\n";
?>
 </body>
</html>
De broncode van de pagina als je het met de browser bekijkt op de website is dan iets als:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>1 gelinkte thumb uit de submap image</title>
  <meta http-equiv="Content-Language" content="nl">
 </head>
 <body>
  <a href="image/klok.jpg" target="_blank"><img src="image/klok_th.jpg" border="0" /></a>
 </body>
</html>
Zo kan het helemaal zonder javascript. :)


Vr.Gr. Egel.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan