Foto's tonen

Status
Niet open voor verdere reacties.
P

patje10

Gebruiker
Lid geworden
1 mrt 2006
Berichten
39
Hoi iedereen

Ik ben al een tijdje op zoek naar een javascriptje waarbij
op een pagina foto's één voor één foto's getoond worden uit een bepaalde
map.
Of een scriptje waarbij steeds dezelfde fotonamen (bv image1 - image2 etc) één voor één getoond worden, maar waarbij in het mapje foto's kunnen bijgevoegd die automatisch getoond worden, zonder aanvulling in het javascript.

Kan iemand mij hierin verder helpen?
Alvast bedankt
mvg
 
Laatst bewerkt:
Je zal toch elke keer dat je een foto bijvoegt of verwijdert iets in het script moeten aanpassen, maar dat is niet veel.
Hier volgt een script met de nodige uitleg erbij. Plaats het in de head van je document.
PHP: 
<script language="javascript">
<!--
var images = 10; // verander deze 10 in het aantal foto's
var cimg = 1; // dit laat je staan om te beginnen bij de eerste foto
function rollImages() {
document.getElementById("fotos").src = "image" + cimg + ".jpg";
// verander hier de jpg door de extentie van jouw foto's
// verander de image door de naam van jouw foto's zonder het nummer
if (cimg == images) {
cimg = 1; // dit laat je ook staan om de cyclus te herbeginnen bij de eerste foto
} else {
cimg++;
};
};
// alles wat hier oranje staat (achter //) mag je verwijderen
-->
</script>

Zet het volgende in de body-tag van je document, en verander de 5000 in het aantal seconden dat je de foto's op het scherm wilt laten staan voor de volgende te tonen, maar doe dit maal 1000 (anders heb je 5 milliseconden, en da's 200 foto's per seconde)
PHP: 
onLoad="setInterval('rollImages();',5000)"

Zet nu het volgende op de plaats waar je de foto's wilt tonen :
PHP: 
<img id="fotos">
Klik in dit voorbeeld op start om het in werking te zien. Het is wel een voorbeeld met meer uitgebreide mogelijkheden.

Greetz : Jer:cool:en.
 
Prachtig dit werkt uitstekend. Bedankt hiervoor !!
Ik krijg bij de 1ste foto een witte pagina met kruisje, de 2de 3de enzovoort worden wel prima weergegeven. Alhoewel de 1ste foto alsook de andere foto's netjes zijn gedefinieerd in de map.


Iemand een idee?

Alvast bedankt
 
De eerste foto wordt door de setInterval() pas na 5 seconde weergegeven.

onLoad="rollImages();setInterval('rollImages()',5000)"

Door het rode gedeelte toe te voegen gebeurt het meteen. :)


Vr.Gr. Egel.
 
ok, prima het werkt.bedankt hiervoor !

Is het mogelijk om met dit scriptje 2 namen te definïeren in de werkmap.
bv image en foto, maar steeds met volgnummer?

Indien mogelijk, alvast bedankt
 
Hoe bedoel je dat precies? :)

Wil je twee fotoreeksen om en om weergeven, als image1.jpg > foto1.jpg > image2.jpg foto2.jpg enz.. Of telkens twee foto's naast elkaar?

Als je meerdere mappen met fotoreeksen hebt is het ook mogelijk om 1 scriptpagina voor allemaal te schrijven. Die roep je dan aan met een link-met-een-vraagteken:
fotopagina.html?mapnaam&image&10
voor 10 foto's in de map "mapnaam": image1.jpg t/m image10.jpg. :)


Vr.Gr. Egel.
 
Alvast bedankt voor je reactie.
Maar het scriptje moet in staat zijn om de ene keer image01, image02 etc te tonen.
De volgende keer als er foto's bijkomen worden handmatig eerst image01 etc gewist, en
vervolgens worden in het mapje foto01.jpg, foto02.jpg.
Het scriptje zou dit dus ook moeten weergeven op de pagina.

Ik hoop dat het nu wat duidelijker is

alvast bedankt voor de hulp !ç
 
PHP: 
<script type="text/javascript">
 <!-- 
  var images = 10; // het aantal foto's
  var firstname = 'image' // eerste fotonaam
  var secondname = 'foto' // tweede fotonaam
  var switchname = 3; // vanaf dit getal wordt de tweede fotonaam gebruikt
  var timeout = 5000; // tijd in milliseconden

  var cimg = 1;
  function rollImages() { 
   document.getElementById('fotos').src = (cimg < switchname ? firstname : secondname) + cimg + '.jpg'; 
   if (cimg == images) { 
    cimg = 1;
    } else { 
    cimg++; 
    };
   setTimeout('rollImages()',timeout);
   };
 // -->
</script>

<body onLoad="rollImages()">
 <img id="fotos">
</body>
Zo? :)


Vr.Gr. Egel.
 
Egel,

Heel vriendelijk van u, maar dit is niet wat ik zocht.

Het scriptje werkt Jeroen goed, maar de ene keer staan in het werkmapje fotonamen, als
image01, image02 etc.
Het scripte herkent en geeft deze foto's weer.

Nu wil ik dat het scriptje eveneens de fotonamen bv foto01 enz.. herkent, zodat ik
beide fotonamen, maar nooit doormekaar, kan weergeven.

Dus het mapje met bv de fotonaam image 01 enz..wordt handmatig leeggemaakt en terug gevuld met bv foto01 enz..

Hopelijk is het begrijpelijk wat ik bedoel.
Alvast bedankt voor de vele hulp

mvg
 
Zeg maar 'je' hoor. :)

Dit script kijkt eerst of foto1.jpg wordt weergegeven. Zo ja dan gebruikt het foto voor de reeks, anders image:
PHP: 
<script type="text/javascript">
 <!--
  var images = 10;    // het aantal foto's
  var timeout = 5000; // tijd in milliseconden

  var name;
  function init() {
   name = (document.getElementById('fotos').complete ? 'foto' : 'image');
   rollImages();
   };
  var cimg = 1;
  function rollImages() {
   document.getElementById('fotos').src = name + cimg + '.jpg';
   if (cimg == images) {
    cimg = 1;
    } else {
    cimg++;
    };
   setTimeout('rollImages()',timeout);
   };
 // -->
</script>

<body onLoad="init()">
 <img id="fotos" src="foto1.jpg">
</body>
Vr.Gr. Egel.
 
Nogmaals vele dank.
Maar dit werkt niet juist, hoor.

Krijg steeds een leeg blad met kruis alsof de foto's of images niet bestaan, alhoewel
ze goed gedifinieerd zijn.

mvg
 
Gebruik je wel foto1.jpg & image1.jpg zonder nul voor het getal?

Het werkt alleen met Explorer, (nog :)) niet met Firefox. Als het online staat moeten de namen in kleine letters zijn, ook .jpg.


Vr.Gr. Egel.
 
Hiermee lukt het.
Wat gebeurt hier :
Eerst wordt in de functie "init()" een willekeurig nummer gekozen tussen 1 en 2.
Aan de hand daar van wordt gekozen voor foto of image en wordt de functie "rollImages()" aangeroepen.

PHP: 
<script type="text/javascript"> 
<!-- 
  var images = 10;    // het aantal foto's 
  var timeout = 5000; // tijd in milliseconden 

  var name, num; 
  function init() { 
   num = Math.floor(Math.random()*2);
   name = (num == 1 ? 'foto' : 'image');
   rollImages(); 
   }; 
  var cimg = 1; 
  function rollImages() { 
   document.getElementById('fotos').src = name + cimg + '.jpg'; 
   if (cimg == images) { 
    cimg = 1; 
    } else { 
    cimg++; 
    }; 
   setTimeout('rollImages()',timeout); 
   }; 
// --> 
</script> 

<body onLoad="init()"> 
<img id="fotos"> 
</body>

Hier heb je een voorbeeld.
Ik heb erboven de door het script gekozen naam laten weergeven omdat de "afbeeldingen" twee keer onder een andere naam zijn bewaard : jouwfoto en jouwthumbnail.
Je kan het controleren door met de rechter muisknop te klikken op de "afbeelding" en eigenschappen te kiezen. Je zal dan zien dat de naam overeenkomt met de getoonde naam op de pagina.

Greetz : Jer:cool:en.
 
Laatst bewerkt:
Bedankt Jeroen, dit werkt perfect.
Na het handmatig verwijderen van bv. image1 etc, daarna vervangen door foto1 etc.. wordt niet onmiddellijk het eerste prentje van die reeks vertoond, na een refresch of 2 van de pagina
doet ie het wel!

groeten en thx

patje10
 
Laatst bewerkt:
patje10 zei:
Bedankt Jeroen, dit werkt perfect.
MAAR, na het handmatig verwijderen van bv. image1 etc, en daarna te vervangen door foto1 etc.. wordt niet onmiddellijk het eerste prentje van die reeks vertoond, na een twee keer een refresh van de pagina
doet ie het wel!

Misschien nog een suggestie?
groeten en bedankt

patje10
Klik om te vergroten...
 
Wat hiervoor moet gebeuren, gaat mij voorlopig nog boven mijn petje, maar ik denk dat je op de een of andere manier moet zien uit te vinden wat er nog op je webspace staat :
foto en image nummers zoveel tot zoveel, ...
Weet niet of dat te doen is met javascript.
Hier is Egel, DE scripter van helpmij.nl, heel wat beter in.

Greetz : Jer:cool:en.
 
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.
 

Bijlagen

Alvast bedankt Egel, voor de vele moeite.
Spijtig genoeg ondersteunt de server geen php.
 
Jammer, het php gedeelte maakt nu juist de lijst met foto's. :)

Misschien is dit wat:
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 060907 ;)
    var photo, name = 'foto', nr = 0, max = 10;
    function init() {
     max = document.f.max.options[document.f.max.selectedIndex].value;
     name = document.f.name.options[document.f.name.selectedIndex].value;
     };
    function slideshow() {
     nr = (nr < max ? nr + 1 : 1);
     photo = name + nr + '.jpg';
     document.getElementById('display').src = photo;
     document.f.filename.value = photo;
     setTimeout('slideshow()',4000);
     };
   // -->
  </script>
 </head>
 <body onload="init();slideshow()">
  <form name="f">
   <select name="name" onchange="init()">
    <option value="foto" selected>foto
    <option value="image">image
   </select>
   <select name="max" onchange="init()">
    <option value="1">&nbsp;1
    <option value="2">&nbsp;2
    <option value="3">&nbsp;3
    <option value="4">&nbsp;4
    <option value="5">&nbsp;5
    <option value="6">&nbsp;6
    <option value="7">&nbsp;7
    <option value="8">&nbsp;8
    <option value="9">&nbsp;9
    <option value="10" selected>10
    <option value="11">11
    <option value="12">12
    <option value="13">13
    <option value="14">14
    <option value="15">15
    <option value="16">16
    <option value="17">17
    <option value="18">18
    <option value="19">19
    <option value="20">20
    <option value="21">21
    <option value="22">22
    <option value="23">23
    <option value="24">24
    <option value="25">25
    <option value="26">26
    <option value="27">27
    <option value="28">28
    <option value="29">29
    <option value="30">30
    <option value="31">31
    <option value="32">32
    <option value="33">33
    <option value="34">34
    <option value="35">35
    <option value="36">36
    <option value="37">37
    <option value="38">38
    <option value="39">39
    <option value="40">40
   </select>
   <input type="text" name="filename" size="24">
  </form>
  <br>
  <img id="display">
 </body>
</html>
Zie bijlage.

Met twee dropdownboxen kun je naam en aantal veranderen, selected stelt de standaard waarden in. :)


Vr.Gr. Egel.
 

Bijlagen

Laatst bewerkt:
Bedankt aan iedereen, en vooral Elen, voor de welgemene hulp.

Maar wat ik juist zoek is een scriptje dat automatisch foto's uit een map toont.
De foto's lopen nummeriek op en heten ofwel image1.jpg, image2.jpg.... OF foto1.jpg, foto2.jpg .... Maar nooit doormekaar.
Dus ofwel vul ik een mapje met foto's genoemd image ofwel genoemd foto.

Als de tijd alleen aanpasbaar was, is dit in orde.
De hoeveelheid foto's aanduiden in het scriptje is geen probleem.

Het scriptje van Jeroen werkt zeer goed, maar de eerste foto komt niet altijd op de page.
Door enkele malen op refresh te klikken komt de foto er wel op, en doet het scriptje zijn werk.

Alvast weeralom bedankt voor de help, want ik kom er spijtig genoeg niet uit !
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan