Foto tonen na klikken button

Status
Niet open voor verdere reacties.
M

Markk25

Gebruiker
Lid geworden
27 feb 2007
Berichten
5
Ik zoek een javascript wat het volgende mogelijk maakt:

na het klikken op een button (post methode) moet er een willekeurige foto getoond worden uit een directory.

Het liefst in de zelfde pagina.

Mark
 
Kan misschien makkelijker met php. Heb je een server waar php op kan?
 
Ja, die mogelijkheid heb ik.

Kan je me erbij helpen dan? :thumb:
 
jep, ik moet nu nog even weg, dus ik zal er morgen nog even naar kijken.
 
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 070227 ;)
    var photo = new Array(
<?php
 echo "     // php start\r\n";
 $d = dir(".");
 while (false !== ($entry = $d->read())) {
  if (ereg(".jpg$", $entry)) {
   echo "     '".$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>
de php maakt een array met alle .jpg bestanden waarvan de functie randomPhoto() er eentje weergeeft als je op de button klikt (geen post methode nodig). :)


Vr.Gr. Egel.
 
Mooi scriptje. Ik was net zelf bezig om het uit te zoeken :D . Ik heb trouwens nog een klein verbeterinetje aan het script, ik heb wat meer extensies toegevoegd.

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 070227 ;) 
    var photo = new Array( 
<?php 
 echo "     // php start\r\n"; 
 $d = dir("."); 
 while (false !== ($entry = $d->read())) { 
  if (ereg(".jpg$", $entry)||ereg(".gif$", $entry)||ereg(".jpeg$", $entry)||ereg(".bmp$", $entry)||ereg(".pgn$", $entry)) { 
   echo "     '".$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>
 
Ik dacht nog, als er meer extensies nodig zijn moet er iemand komen met meer verstand van php. :D

Het kan ook zo:
PHP: 
  if (ereg("\.(jpg|gif|jpeg|png|bmp)$", $entry)) {
Ik leer 't nog wel. ;)

(het moet wel .png zijn je had .pgn)


Vr.Gr. Egel.
 
Ach, zo leer ik ook weer wat :) . Waar heb je het dan vandaan? Of heb je het helemaal zelf gescheven?
 
Laatst bewerkt:
Hierin kan je toch de directory van je plaatjes verwijzen?

PHP: 
 $d = dir("/image");

Zo dus ?
 
haroim zei:
Waar heb je het dan vandaan? Of heb je het helemaal zelf gescheven?
Klik om te vergroten...
De helft van de php had ik gegoogeld maar de rest is van mezelf. :) Ik had het al eerder gebruikt voor een slideshow: http://www.helpmij.nl/forum/showpost.php?p=1728723&postcount=17
Markk25 zei:
Hierin kan je toch de directory van je plaatjes verwijzen?
Klik om te vergroten...
Het is idd $d = dir("./image"); in de echo moet er dan ook nog image/ bij:
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>

Vr.Gr. Egel.
 
De code werkt bij mij nog niet.

Ik krijg een button met een kruisje van een onafgebeelde foto te zien. Wanneer ik op het button klik, doet ie ook niks.

Ik heb gewoon php draaien en heb een map met image aangemaakt.

Is het ook misschien mogelijk om na het afbeelden van de foto de button te verwijderen. Het is namelijk de bedoeling om een willekeurige foto maar 1 keer te tonen.

Groet,
Mark
 
Dit zorgt dat er alleen staat wat er nodig is. Ik hoop dat het goed is. Succes :thumb: .

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"> 
  <style type="text/css"> 
 .verborgen {display: none; visibility: hidden;} 

</style> 

  <script type="text/javascript"> 
   <!-- 
  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]; 
      document.getElementById('div1').className = 'verborgen';
      document.getElementById('div2').className = 'zichtbaar';
     }; 
   // --> 
  </script> 
 </head> 
 <body>

   <div id="div1" class="zichtbaar"><input type="button" value="Willekeurige foto" onclick="randomPhoto()"><br></div>
  <div id="div2" class="verborgen"><img id="display"></div>
 </body> 
</html>
 
Markk25 zei:
De code werkt bij mij nog niet.

Ik krijg een button met een kruisje van een onafgebeelde foto te zien. Wanneer ik op het button klik, doet ie ook niks.

Ik heb gewoon php draaien en heb een map met image aangemaakt.
Klik om te vergroten...
Zijn alle filenamen in kleine letters, met name de extensie? Het is zowiezo het beste om voor file- en mapnamen alleen kleine letters, cijfers en een underscore te gebruiken. En één punt voor de extensie. :)
Markk25 zei:
Is het ook misschien mogelijk om na het afbeelden van de foto de button te verwijderen. Het is namelijk de bedoeling om een willekeurige foto maar 1 keer te tonen.
Klik om te vergroten...
Ja ... Gaat het om een aantal foto's die allemaal even groot zijn? Dan kan zoiets ook:
<span style="background: url(image/foto.jpg)"><img src="knop.gif" onclick="this.src='blanco.gif'"></span>
de php zorgt dan voor een willekeurige foto, door op knop.gif te klikken wordt die vervangen door de doorzichtige blanco.gif.


Vr.Gr. Egel.
 
Laatst bewerkt:
Ja nu werkt het wel :thumb:

Ik wil eigenlijk 2 aparte php pagina's hebben. Dat is namelijk makkelijker voor mij om een layout te geven. Is dat mogelijk? Of kan ik met 1 php bestand (huidige bestand)ook de layout van de volgende pagina (dus foto) makkelijk configureren?
Groet,
Mark
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan