Foto's tonen

Status
Niet open voor verdere reacties.
Het script van reaktie #10 'kijkt' of een foto bestaat maar dat werkte niet bij jou. :confused:

Het script van Jeroen (#13) doet het maar dat gebruikt een willekeurige naam (dobbelsteen) waardoor je evt een paar keer moet verversen.

Php heb je helaas niet (#17).

#19 werkt wel goed toch? Daarmee kun je live het aantal en de naam kiezen. :)


Dit is een eenvoudiger en aanpasbaar script:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Slideshow</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 060917 ;)

    // alleen onderstaande regel aanpassen
    var timeout = 4000, max = 10, name = new Array('foto','image');

    var nr = 0, sn = 0;
    function change() {
     sn = (sn < name.length - 1 ? sn + 1 : 0);
     show();
     };
    function slide() {
     nr = (nr < max ? nr + 1 : 1);
     show();
     setTimeout('slide()',timeout);
     };
    function show() {
     document.getElementById('display').src = name[sn] + nr + '.jpg';
     };
   // -->
  </script>
 </head>
 <body onload="slide()">
  <img id="display" onclick="change()" style="cursor: pointer;" title="klik voor een andere naam">
 </body>
</html>
Zie bijlage.

Door op de foto te klikken wordt een andere naam gebruikt. Deze regel is de enigste die je evt moet aanpassen:
var timeout = 4000, max = 10, name = new Array('foto','image');

timeout is het aantal milliseconde tussen fotos wisselen, max het aantal fotos, en name is de reeks met de verschillende namen. :)


Vr.Gr. Egel.
 

Bijlagen

Egel zei:
Even terug naar het begin: :)

Je wilt een webpagina die alle jpg foto's uit een map in een slideshow weergeeft:
1: offline of online?
1b: bij online, ondersteunt je website php?
2: Explorer en/of Firefox?


Bij offline (op je harddisk) is een batch file (*.bat) waarschijnlijk het makkelijkst, bij dubbelklikken genereert die dan een filelist en opent de slideshow.html.

Bij online én php:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Php *.jpg Slideshow</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 060907 ;)
    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";
?>
     '');
    var nr = 0, max = photo.length - 2;
    function slideshow() {
     document.getElementById('display').src = photo[nr];
     nr = (nr < max ? nr + 1 : 0);
     setTimeout('slideshow()',4000);
     };
   // -->
  </script>
 </head>
 <body onload="slideshow()">
  <img id="display">
 </body>
</html>
Zie bijlage. :cool: ;)


Vr.Gr. Egel.
Klik om te vergroten...

Hallo Egel,
Dit is een mooi voorbeeld. Wat moet ik in dit voorbeeld veranderen als mijn afbeeldingen in de map \images\animatie staan?
Alvast bedankt voor uw reactie.

Groeten,
Rob
 
2x images/animatie/ invoegen bij dir() en .src
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Php *.jpg Slideshow (uit de submap images/animatie/)</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 080301 ;)
    var photo = new Array(
<?php
 $d = dir("images/animatie/");
 while (false !== ($entry = $d->read())) {
  if (ereg(".jpg$", $entry)) {
   echo "     '".$entry."',\r\n";
   };
  };
 $d->close();
?>
     '');
    var nr = 0, max = photo.length - 2;
    function slideshow() {
     document.getElementById('display').src = 'images/animatie/' + photo[nr];
     nr = (nr < max ? nr + 1 : 0);
     setTimeout('slideshow()',4000);
     };
   // -->
  </script>
 </head>
 <body onload="slideshow()">
  <img id="display">
 </body>
</html>
Doet 't goed. :) Als je dat in je browser bekijkt wordt het (iets als) dit:
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Php *.jpg Slideshow (uit de submap images/animatie/)</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 080301 ;)
    var photo = new Array(
     '12.jpg',
     '11.jpg',
     '10.jpg',
     '09.jpg',
     '08.jpg',
     '07.jpg',
     '06.jpg',
     '05.jpg',
     '04.jpg',
     '03.jpg',
     '02.jpg',
     '01.jpg',
     '');
    var nr = 0, max = photo.length - 2;
    function slideshow() {
     document.getElementById('display').src = 'images/animatie/' + photo[nr];
     nr = (nr < max ? nr + 1 : 0);
     setTimeout('slideshow()',4000);
     };
   // -->
  </script>
 </head>
 <body onload="slideshow()">
  <img id="display">
 </body>
</html>

Vr.Gr. Egel.
 
Egel zei:
2x images/animatie/ invoegen bij dir() en .src
PHP: 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Php *.jpg Slideshow (uit de submap images/animatie/)</title>
  <meta http-equiv="Content-Language" content="nl">
  <script type="text/javascript">
   <!-- Egel 080301 ;)
    var photo = new Array(
<?php
 $d = dir("images/animatie/");
 while (false !== ($entry = $d->read())) {
  if (ereg(".jpg$", $entry)) {
   echo "     '".$entry."',\r\n";
   };
  };
 $d->close();
?>
     '');
    var nr = 0, max = photo.length - 2;
    function slideshow() {
     document.getElementById('display').src = 'images/animatie/' + photo[nr];
     nr = (nr < max ? nr + 1 : 0);
     setTimeout('slideshow()',4000);
     };
   // -->
  </script>
 </head>
 <body onload="slideshow()">
  <img id="display">
 </body>
</html>

Vr.Gr. Egel.[/font][/QUOTE]

Dag Egel, bedankt voor je hulp.
Hij doet het!!!

Nu is het zo dat al mijn html-pagina's gebruik maken van een sjabloon, mijn html-pagina's staan in verschillende mappen. Elke pagina maakt gebruikt van de slideshow die onderaan de pagina wordt vertoond. Daarom heb ik als bestandslokatie "/images/animatie/" en "http:/www.mijnsite.nl/images/animatie/" geprobeerd zodat hij vanuit elke html-pagina in elke willekeurige map zou moeten werken maar dan werkt het niet meer. Weet je misschien wat ik fout doe?

De reden dat ik deze slideshow wil gebruiken is omdat ik het gebruik van de animated gif die ik tot nu toe gebruikte erg groot werd en steeds opnieuw moest genereren. Ik kan nu ook mooi .jpg's gebruiken. Uit performance-oogpunt vraag ik mij het volgende af: wat is de ideale plek van het stukje php-code en de "slideshow()" er vanuitgaande dat deze pas onderaan de pagina hoeft te worden getoond?

Alvast bedankt voor je hulp.
Klik om te vergroten...
 
Ik moest even zoeken naar een oplossing, de root van Php blijkt een paar mappen hoger te liggen dan die van een website. :)

Allereerst een klein Php bestand om het volledige pad in Php op te vragen:
PHP: 
<?php echo getcwd(); echo "/"; ?>
Dat bewaar je als getcwd.php en plaats je in de map /images/animatie/ Vervolgens open je het met je browser en verschijnt er iets als:
/home/~~~/~~~/html/images/animatie/

Dat kopieëer je in het volgende script, bij de dir():
PHP: 
<?php
 echo "<script type=\"text/javascript\">
 <!-- Egel 080307 ;)
  var photo = new Array(
";
 $d = dir("/home/~~~/~~~/html/images/animatie/");
 while (false !== ($entry = $d->read())) {
  if (ereg(".jpg$", $entry)) {
   echo "   '".$entry."',\r\n";
   };
  };
 $d->close();
 echo "   '');
  var nr = 0, max = photo.length - 2;
  function slideshow() {
   document.getElementById('display').src = '/images/animatie/' + photo[nr];
   nr = (nr < max ? nr + 1 : 0);
   setTimeout('slideshow()',4000);
   };
  document.writeln('<img id=\"display\">');
  slideshow();
 // -->
</script>";
?>
en bewaar je als slideshow.php in de hoofdmap van je site.

Als je het opent doet de slideshow het al maar het leuke is dat je het nu kunt includen. In een pagina zet je dan op de plek waar je de animatie wilt hebben:
PHP: 
<?php include 'slideshow.php'; ?>
en dan werkt het vanzelf. :) In een submap gebruik je ../ ervoor:
PHP: 
<?php include '../slideshow.php'; ?>


Vr.Gr. Egel.
 
Laatst bewerkt:
Prachtig mooi egel. Het werkt! En zo te zien supersnel.:thumb:

Dank hiervoor.

De plaatjes worden mooi wisselend weergegeven op de plek waar
<?php include 'slideshow.php'; ?> staat

Nu is bij mij "<?php include 'slideshow.php'; ?> " geplaatst in een cel van een table (in de meest rechtse kolom van een tabel onderaan mijn pagina).
Maar de slideshow wordt om een of andere reden nu niet in die cel getoond maar links naast de table. Is dit makkelijk te verhelpen of moet ik dan terug naar de voorlaatst getoonde versie van je voorbeeld?

Groeten,

Rob
 
Graag gedaan! :)

Heb je niet een extra <img id="display"> in de pagina staan dat het links naast de tabel word weergegeven? :confused: De slideshow plaatst de img tag namelijk al zelf.

Een iets verbeterde slideshow.php
PHP: 
<img id="display"><script type="text/javascript">
 // Egel 080307 ;)
 var photo = new Array(
<?php
 $d = dir("/home/~~~/~~~/html/images/animatie/");
 while (false !== ($entry = $d->read())) {
  if (ereg(".jpg$", $entry)) {
   echo "  '".$entry."',\r\n";
   };
  };
 $d->close();
?>
  '');
 var nr = 0, max = photo.length - 2;
 function slideshow() {
  document.getElementById('display').src = '/images/animatie/' + photo[nr];
  nr = (nr < max ? nr + 1 : 0);
  setTimeout('slideshow()',4000);
  };
 slideshow();
</script>
(Geen nieuwe regel na </script>)

Als ik dat met
PHP: 
[start]<?php include 'slideshow.php'; ?>[einde]
aanroep dan krijg ik dit in de html pagina:
PHP: 
[start]<img id="display"><script type="text/javascript">
 // Egel 080307 ;)
 var photo = new Array(
  '12.jpg',
  '11.jpg',
  '10.jpg',
  '09.jpg',
  '08.jpg',
  '07.jpg',
  '06.jpg',
  '05.jpg',
  '04.jpg',
  '03.jpg',
  '02.jpg',
  '01.jpg',
  '');
 var nr = 0, max = photo.length - 2;
 function slideshow() {
  document.getElementById('display').src = '/images/animatie/' + photo[nr];
  nr = (nr < max ? nr + 1 : 0);
  setTimeout('slideshow()',4000);
  };
 slideshow();
</script>[einde]
Als het dan nog misgaat denk ik dat er ergens een tag teveel of te weinig staat in de rest van de pagina. :)


Vr.Gr. Egel.
 
Ik ben gelukkig :D

Hij doet het nu perfect. Het lijkt wel alsof je helderziend ben. Ik had met het testen van de vorige versie de include php verplaatst naar buiten de table :o stom stom

Nog even wat getest met het aanroepen van de slideshow.php. Als ik er hetzelfde voorzet als de directoryaanduiding IN de slideshow.php, dan werkt het ook met html-pagina's in de submappen. Kan ik gewoon mijn sjaboon blijven gebruiken ;)

Egel, jij bent fantastisch! Nogmaals heel hartelijk dank.

Ik wil nog zoveel leren: java, php, sql, flash.......... Ik weet niet nog niet waar ik moet beginnen :D Nog even los van de tijd wat het me kost :(
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan