login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Fotoaantal weergeven boven foto (Opgelost)

Offline jc2 - 19/04/2008 20:16
Avatar van jc2PHP interesse Hoi allemaal,

Onderstaande code + php zorgt ervoor dat ik een fotoalbum met een 'Vorige'- en 'Volgende'-knop heb.
Nu vroeg ik me af of er in deze javascript-code iets in te bouwen is om de foto die weergeven wordt ook als aantal te weergeven, dus:
foto 1/6
foto 2/6
enz.

Zou iemand me hiermee kunnen helpen, want mij is het niet gelukt door bij een waarde ('huidige fotowaarde') op te tellen (volgende) of af te trekken (vorige).

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript1.1">
  2. var photos=new Array()
  3. var which=0
  4.  
  5. /*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
  6. photos[0]="dia1.jpg"
  7. photos[1]="dia2.jpg"
  8. photos[2]="dia3.jpg"
  9. photos[3]="dia4.jpg"
  10. photos[4]="dia5.jpg"
  11. photos[5]="dia6.jpg"
  12.  
  13.  
  14. function backward(){
  15. if (which>0){
  16. window.status=''
  17. which--
  18. document.images.photoslider.src=photos[which]}}
  19.  
  20. function forward(){
  21. if (which<photos.length-1){
  22. which++
  23. document.images.photoslider.src=photos[which]}
  24. else window.status='End of gallery'}
  25. </script>

2 antwoorden

Gesponsorde links
Offline Ibrahim - 19/04/2008 20:35 (laatste wijziging 19/04/2008 21:10)
Avatar van Ibrahim PHP expert gebruik which + 1 ?

edit:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var myPhotos = new Array(4);
  2. myPhotos[0]  = 'photo1.jpg';
  3. myPhotos[1]  = 'photo2.jpg';
  4. myPhotos[2]  = 'photo3.jpg';
  5. myPhotos[3]  = 'photo4.jpg';
  6.  
  7. function previousImage()
  8. {
  9.      var currentNumber = document.getElementById('currentNumber').value;
  10.      currentNumber      = parseInt(currentNumber);
  11.  
  12.      var activeImage    = document.getElementById('activeImage');
  13.  
  14.      activeImage.src     = myPhotos[currentNumber - 1];
  15.  
  16.      return;
  17. }
  18. //nextImage functie is hetzelfde, maar dan +
  19.  
  20. window.onload = function() {
  21.     document.getElementById('currentNumber').value = 0;
  22.     document.getElementById('activeImage').src       = myPhotos[0];
  23. };


html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <img src="#" id="activeImage" />
  2. <input type="hidden" value="" id="currentNumber" />


Rest kun je zelf wel bedenken...
Offline jc2 - 20/04/2008 17:25 (laatste wijziging 20/04/2008 17:26)
Avatar van jc2 PHP interesse Bovenstaande oplossing werkte niet.

Op deze manier heb ik het opgelost:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript1.1">
  2. var photos=new Array()
  3. var which=0;
  4. var map="afbeeldingen/jpg/";
  5.  
  6. /*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/
  7. photos[0]=map+"dia1.jpg";
  8. photos[1]=map+"dia2.jpg";
  9. photos[2]=map+"dia3.jpg";
  10. photos[3]=map+"dia4.jpg";
  11. photos[4]=map+"dia5.jpg";
  12. photos[5]=map+"dia6.jpg";
  13.  
  14. function previousImage(){
  15. if (which>0){
  16. window.status=''
  17. which--
  18. document.images.photoslider.src=photos[which];
  19. thisphoto=document.getElementById('dezefoto');
  20. thisphoto.innerHTML=which+1;
  21. setTimeout(dezefoto, 1000);
  22. }}
  23.  
  24. function nextImage(){
  25. if (which<photos.length-1){
  26. which++
  27. document.images.photoslider.src=photos[which];
  28. thisphoto=document.getElementById('dezefoto');
  29. thisphoto.innerHTML=which+1;
  30. setTimeout(dezefoto, 1000);
  31. }
  32. else window.status='End of gallery'
  33. }
  34.  
  35. var totalphoto=photos.length;
  36. </script>


en in HTML+PHP:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. <table>
  2. <td width="100%" align="center" valign="middle">
  3. <span id="dezefoto">1</span>/<script language="JavaScript">document.write(totalphoto);</script><br>
  4. <img src="afbeeldingen/jpg/dia1.jpg" width="300" height="347" name="photoslider">
  5. </td>
  6. <tr>
  7. <td width="100%" align="center" valign="middle">
  8. <form method="POST" name="rotater">
  9. <div align="center"><center><p>
  10. <input type="button" class="photobuttons" value="« Vorige" name="B2" onClick="previousImage()"> 
  11. <input type="button" class="photobuttons" value="Start" name="B3" onClick="which=1;previousImage();return false"> 
  12. <input type="button" class="photobuttons" value="Volgende »" name="B1" onClick="nextImage()"><br>
  13. </p></center></div>
  14. </form>
  15. </td>
  16. </tr>
  17. </table>
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.206s