[RESOLU]Faire une gallerie de photo en HTML [SISI CA MARCHE] :)

:) [RESOLU]Faire une gallerie de photo en HTML [SISI CA MARCHE] - HTML/CSS - Programmation

Marsh Posté le 22-03-2006 à 16:35:56    

Bonjour,
 
Je suis tout nouveau en HTML et je n'y connais pas grand chose et je souhaite faire une gallerie de photo.  
Le principe que je souhaite mettre en place est le suivant : un répertoire avoir des images très lourdes dedant en jpg, un autre répertoire avec les miniatures des images du répertoire image , un fichier index.html avec les miniatures affichées et lorsqu'on clique on tombe sur une autre page html.  
 
Le code que j'ai a été créer par un générateur html de gallerie et celui ci créer autant de page html qu'il ya de photo dans ma gallerie.
 
Je trouve cela un peu dommage.  
En fait ce que souhaiterais faire au lieu d'avoir un tas de page html c'est de créer une page html qui va chercher les images. Je pense qu'il faut que je passe par des variables mais je ne sais pas comment faire.
 
Je suis prêt à créer un fichier à coté pour la liste des photos si cela est nécessaire
 
Voici le code HTML de toto.html :
 

Code :
  1. <html>
  2.        <head>
  3.              <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4.              <meta name="Generator" content="">
  5.              <meta name="date" content="Mercredi 22 Mars 2006">
  6.              <title>Galeries d'images des albums photo : Relax.jpg</title>
  7.              <style type="text/css">
  8.                            BODY {color: #d0ffd0; background: #333333; font-family: Helvetica, sans-serif;font-size: 14pt; margin: 4%; }
  9.                            H1       {color: #d0ffd0;}
  10.                           TABLE    {text-align: center; margin-left: auto; margin-right: auto;}
  11.                           TD       { color: #d0ffd0; padding: 1em}
  12.                           IMG.photo      { border: 1px solid #d0ffd0; }
  13.                           a:link    { color: #b3b3b3; }
  14.                           a:visited { color: #b3b3b3; }
  15.              </style>
  16.         </head>
  17.        <body>
  18.              <div align="center">
  19.              <a href="Naptime.jpg.html">
  20.              <img class="photo" src="../thumbs/Naptime.jpg" alt="Pr&eacute;c&eacute;dent" title="Pr&eacute;c&eacute;dent" height="64"
  21.               width="85">
  22.              </a>&nbsp;| &nbsp;
  23.              <a href="../index.html">
  24.              <img src="../up.png" title="Index de l'album" alt="Index de l'album" border="0">
  25.              </a>&nbsp; | &nbsp;
  26.              <a href="Silence.jpg.jpg.html">
  27.              <img class="photo" src="../thumbs/Silence.jpg.jpg" alt="Suivant" title="Suivant" height="64" width="85">
  28.              </a>
  29.              <br>
  30.              <hr><br>
  31.              <br>
  32.              <img class="photo" src="../images/Relax.jpg.jpg" alt="Relax.jpg.jpg" title="Relax.jpg.jpg, 640&nbsp;x&nbsp;480">
  33.              <br>
  34.              <br>
  35.              </div>
  36.      </body>
  37. </html>


Message édité par mfauxock le 30-03-2006 à 17:51:41
Reply

Marsh Posté le 22-03-2006 à 16:35:56   

Reply

Marsh Posté le 22-03-2006 à 17:54:13    

Pour une galerie photo il est impératif de pouvoir faire ç avec PHP ;)
 
Sinon c'est la merde

Reply

Marsh Posté le 27-03-2006 à 11:34:57    

Non il n'est pas impératif de le faire avec du php. La preuve je l'ai fait. Je cherche maintenant à améliorer le code html.
Le problème ne réside pas dans le fait qu'il faut ou non utiliser du php mais de savoir quels sont les moyens dont je dispose et quelles sont mes contraintes.

Reply

Marsh Posté le 27-03-2006 à 11:56:05    

Si tu veut passer des variables de pages en pages -> PHP
Si tu veut pas avoir 1 page pour chaques photos -> PHP
Si tu veut un minimum de dynamisme (listage d'un repertoire de photo au lieu de tout codé en dur en html -> PHP
 
Apres tu  fais ce que tu veux mais mais une gallerie sans PHP pour un resultat sympa et une utlisation pas trop contraingnante.. c'est chaud et ca sert a rien

Reply

Marsh Posté le 27-03-2006 à 12:32:04    

tu peut le faire avec un petit javascript. tu doit trouver tout un tas de scripts prêts à utiliser sur le net.

Reply

Marsh Posté le 27-03-2006 à 17:58:00    

Oula on se calme avec php !
De mémoire si je veux utiliser php il me faut un serveur php, non ?
Et là c'est le drame car je ne peux pas intaller ce foutu machin sur les toutes les machines (c'est pas que je veux pas)
 
nargy tu m'intéresses as tu un lien à me proposer car j'ai cherché avec google mais je n'ai pas trouvé chaussure à mon pied
 
merci tout lemeonde

Reply

Marsh Posté le 27-03-2006 à 18:16:59    

C'est nimporte quoi ce que tu fais...
 
Alors 1:
 
Javascript n'est pas du tout un langage fait pour ce genre de truc...enfin.
 
2:
 
Si on te dis PHP, c'est pas pour te faire chier, mais parce que ça va te rendre la vie, 10.000 fois plus facile.
 
3:
Bon ben fait tout en dure, comme un vieux gars, et aprés quand tu devras faire un changement, tout à modifier...
 
 
 [:benou_grilled]

Reply

Marsh Posté le 27-03-2006 à 19:46:09    

ben comme ça j en ai pas sous la main...
 
c est tellement facile d en trouver, il y en a sur plein de sites, et tout aussi facile d en faire un:
- tu mets le nom de tes images dans une Array()
- tu affiche la liste des thumbs à partir de la liste
- quand un internaute clique sur un thumb:
  - soit tu choisit d afficher l image dans la même page en réservant une grande image pour y changer l url (document.getElementById(visualisation).src=),
  - soit tu ouvre une nouvelle fenêtre avec window.open();
  - soit tu affiche l image en grande taille dans la même fenêtre: window.location=...
 
Les inconvénients du javascript:
- tu doit mettre à jour l Array quand tu veut ajouter/ertirer des images,
- tu doit convertir toi même par avance les images en thumbs (je te conseille ImageMagick pour ça)
- pour les deux raisons cité précédemment, la maintenance d une grande gallerie avec des sous-répertoires peut s avérer difficile,
- les internautes n ont pas forcément JS activé.
 
Sinon, tu as des scripts Perl ou Python qui te font des galleries paramétrable (sans serveur web), et là encore une petite recherche google t aidera à trouver facilement.

Reply

Marsh Posté le 27-03-2006 à 20:00:05    

un exemple trouvé dans une autre discussion, gallerie photo avec liens suivant/precedant:
http://www.ats3r.org/2005.php

Reply

Marsh Posté le 27-03-2006 à 23:40:58    

Bref laisse tomber JS, PHP serait beaucoup plus pratique et compatible.
 

Reply

Marsh Posté le 27-03-2006 à 23:40:58   

Reply

Marsh Posté le 28-03-2006 à 13:30:54    

nargy !
 
Super l'exemple c'est pile poil ce que je cherche
En ce qui concerne les inconvénients :
c'est vrai pour les deux premiers points mais je demande dans quelle mesure javascript ne peut générer la liste des images contenu dans un un fichier "à la volée" (j'ai déjà vu ça en VB)
Si je résouds ce problème la maintenance sera plus facile.
Enfin il ne s'agit pas de faire un site web mais de faire tourner le programme sur quelques machines (à moi de vérifier les problèmes avec JS activé ou non).
 
Merci encore

Reply

Marsh Posté le 28-03-2006 à 16:59:44    

Bonjour,
 
Est ce que quelqu'un peut me dire :
-comment compter le nombre de fichier dans un répertoire ?
-comment écrire dans un array la liste des fichier de ce même répertoire ?  
Le tout en javascript naturellement... :)
 
Merci

Reply

Marsh Posté le 28-03-2006 à 17:08:34    

Je précise:
- tu doit mettre à jour l Array A LA MAIN quand tu veut ajouter/retirer des images

Reply

Marsh Posté le 28-03-2006 à 17:41:28    

Je ne vois pas pourquoi javascript ne peut pas le faire.
J'ai du mal à imaginer qu'un code comme javascript ou vbscript ne soit pas capable de rapatrier les noms de fichiers.
Je continue de chercher

Reply

Marsh Posté le 28-03-2006 à 18:39:45    

Menfin non!
 
Tu ne peut pas demander au serveur web quels sont les fichiers pésents dans un répertoire.
 
Ensuite même si tu fait une liste à part à télécharger, autant la faire en javascript.


Message édité par nargy le 28-03-2006 à 19:38:51
Reply

Marsh Posté le 28-03-2006 à 19:32:16    

mfauxock a écrit :

Je ne vois pas pourquoi javascript ne peut pas le faire.
J'ai du mal à imaginer qu'un code comme javascript ou vbscript ne soit pas capable de rapatrier les noms de fichiers.
Je continue de chercher


 
 
 :o  
 
JS: langage client..donc ça intéragie sur ta machine./
 
PHP : langage serveur....
 
 
 :pfff:

Reply

Marsh Posté le 29-03-2006 à 09:09:55    

Je crois que vous n'avez pas compris l'objectif de mon programme.  
 
J'ai une seul machine sans réseau au milieu d'une forêt dense et très épaisse avec impossibilité de faire passer du wifi.
Sur cette machine j'ai un répertoire avec tout plein de photos.
Je souhaite faire un programme qui me permette via IE ou FF de visualiser ces photos.  
 
Donc JS d'après ce que dit xtof_83 est capable de m'aider : c'est génial non ?
 
questions  
 

Citation :


-comment compter le nombre de fichier dans un répertoire ?
-comment écrire dans un array la liste des fichier de ce même répertoire ?  
Le tout en javascript naturellement... :)  


 
Bon j'espère que j'ai été plus cette fois.
 
Merci

Reply

Marsh Posté le 29-03-2006 à 09:38:25    

-comment compter le nombre de fichier dans un répertoire ?  
 
Pas possible en javascript.

Reply

Marsh Posté le 29-03-2006 à 10:21:44    

javascript ne permet pas de toucher aux fichiers locaux.

Reply

Marsh Posté le 29-03-2006 à 13:45:04    

mfauxock a écrit :

Oula on se calme avec php !
De mémoire si je veux utiliser php il me faut un serveur php, non ?
Et là c'est le drame car je ne peux pas intaller ce foutu machin sur les toutes les machines (c'est pas que je veux pas)
 
nargy tu m'intéresses as tu un lien à me proposer car j'ai cherché avec google mais je n'ai pas trouvé chaussure à mon pied
 
merci tout lemeonde


 :pfff:  :pfff:  
une machine suffit, me trompe je ?  :pt1cable:  
PHP c'est sur le serveur lol

Reply

Marsh Posté le 29-03-2006 à 13:46:29    

ha, j'ai lu un peu plus bas, et je vois que tu ne veux pas un truc en reseau, mais en local, donc en effet, seul le JS peut t'aider
 
au temps pour moi

Reply

Marsh Posté le 29-03-2006 à 13:55:47    

Install EasyPHP sur ta machine et Basta
 
Tu te fera mille fois moins chié. C'est presque aussi rapide et facile que d'activer le javascript..
 
Si tu n'as qu'un poste où afficher ca  va etre aussi facile de se faire lancer phpeasy a chaque démarrage et d'afficher ton site local que de config IE pour qu'il accepte le JS..
 
Enfin si tu persiste a ne pas vouloir de PHP, debrouilles toi et tape toit tout ca en dur dans tes fichiers

Reply

Marsh Posté le 29-03-2006 à 14:20:00    

C est pas une question de PHP ou pas, d ailleurs un programme en Java serait plus approprié.
 
Pour des raisons de sécurité, javascript interdit de bidouiller les fichiers en local, tu devra donc trouver un moyen autre que JS pour trouver la liste des images.

Reply

Marsh Posté le 29-03-2006 à 15:29:13    

>C est pas une question de PHP ou pas
 
Bha si, si il est nouveau en html, je le vois mal faire un truc en Java..
 
J'essayes juste de lui faire comprendre que le plus simple serait qu'il opte pour une solution PHp + easyPHP en local ce qui serait benefique pour :
 
-le developpement
-le dynamisme (pas obligé de tout codé en dur)
-la mise a jour / maintenance
-l'efficacite d'utilisation: pour lui et les utilisateurs.
 

Reply

Marsh Posté le 29-03-2006 à 15:33:38    

a mon avis, il cherche plutot à avoir un truc moins moche que le visionneur de windob, ceci dit un ptit tour sur msdn et il trouvera comment configurer la présentation de ses répertoires photos...

Reply

Marsh Posté le 29-03-2006 à 16:59:36    

Autant carrément télécharger un logiciel visionneur ^^

Reply

Marsh Posté le 29-03-2006 à 22:36:14    

ya pas que php (qui est mediocre en plus)
tu peut faire ca en utilisant CGI (avec Perl ou Python) voir du jsp (love :p)

Reply

Marsh Posté le 30-03-2006 à 00:06:12    

kedare a écrit :

ya pas que php (qui est mediocre en plus)
tu peut faire ca en utilisant CGI (avec Perl ou Python) voir du jsp (love :p)


 
:|

Reply

Marsh Posté le 30-03-2006 à 07:44:11    

Dans ton cas, vu ce que tu veut faire, te casse pas la tête.
 
Tu télécharge Picasa2 (programme gratuit)
 
Il te scan ton disque et tu peu visualiser le tout sans probleme en gallerie.
Si tu veut vraiment en faire des pages WEB, tu as une option et il te fait la gallerie en HTML.
 
Et en plus les script sont super simple à modifier pour les integrer dans une page existante.
Tu peu en changer les CSS, ect ect ...
et pour les feroces du PHP de ce topic, tu peut parfaitement en inclure dans les scripts de Picasa2
 
pas de javascript dans ta page.
pas de php.
 
tu va etre heureux !


Message édité par Lorr Hyde le 30-03-2006 à 07:45:28
Reply

Marsh Posté le 30-03-2006 à 09:30:33    

kedare a écrit :

ya pas que php (qui est mediocre  :o  en plus)
 
tu peut faire ca en utilisant CGI (avec Perl ou Python) voir du jsp (love :p)


 

Citation :

Bonjour,
 
Je suis tout nouveau en HTML et je n'y connais pas grand chose et je souhaite faire une gallerie de photo.  


 
Ca me semble parfait ! nan mais franchement, pourquoi pas lui proposer du AJAX directement ?
 
 
Sinon l'idée de picasa est parfaite, mais l'intéréssé semble ne plus etre dans le coin :p

Reply

Marsh Posté le 30-03-2006 à 10:56:52    

AJAX okay, mais alors il lui faut un langage serveur de toute façon  :non:

Reply

Marsh Posté le 30-03-2006 à 11:43:09    

Reply

Marsh Posté le 30-03-2006 à 17:27:00    

Bonjour,
 
Je dois avouer que j'ai hésité à faire part de mon travail sur ce forum. Certains d'entre vous (pas tous) se croient tellement malin que les messages qu'ils ont laissés dans ce post ne me semble pas en rien compatible avec l'esprit d'échange d'un forum d'entre aide.
 
Cependant, je pense que d'autres comme moi peuvent être intéresser et c'est donc à ceux là seulement que s'adresse le code suivant :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4.   <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  5.   <title>Diaporama</title>
  6. </head>
  7. <body>
  8. <button onclick="jsdiapo_move('first')">Premier</button>
  9. <!-- Utilisation de jsdiapo_move('first') -->
  10. <button onclick="jsdiapo_move('back')">Precedent</button>
  11. <!-- Utilisation de jsdiapo_move('back') -->
  12. <button onclick="jsdiapo_move('next')">Suivant</button>
  13. <!-- Utilisation de jsdiapo_move('next') -->
  14. <button onclick="jsdiapo_move('last')">Dernier</button>
  15. <!-- Utilisation de jsdiapo_move('last') -->
  16. <div id="jsdiapo_move_nfo"></div>
  17. <!-- C'est ici qu'on affiche avec la fonction jsdiapo_move_nfo() l'emplacement actuel du pointeur --><!--var rep
  18. <br-->
  19. <img id="jsdiapo_images_img" border="0">
  20. <script language="javascript">
  21.       fso = new ActiveXObject("Scripting.FileSystemObject" );
  22.       fold = fso.GetFolder('C:/img');
  23.       jsdiapo_images=new Array();                                       // liste en mémoire
  24.       ff = new Enumerator(fold.files);
  25.         for (; !ff.atEnd(); ff.moveNext()) {
  26.          s=ff.item()
  27. if (".gif.jpg.bmp".indexOf(fso.GetExtensionName(s.name))>0) 
  28. jsdiapo_images[jsdiapo_images.length]='C:/img/'+s.name
  29.        
  30.          }
  31.        
  32.       jsdiapo_images.sort()
  33. var jsdiapo_error_report = "0";
  34. var jsdiapo_images_now = "0";
  35. var jsdiapo_images_auto = "0";
  36. var jsdiapo_images_auto_msec = "5000";
  37. var jsdiapo_images_max = jsdiapo_images.length-1;
  38. var jsdiapo_move_nfo_exec = "1";
  39. var jsdiapo_move_key = "1";
  40. var jsdiapo_move_key_first = "7";
  41. var jsdiapo_move_key_back = "4";
  42. var jsdiapo_move_key_next = "6";
  43. var jsdiapo_move_key_last = "9";
  44. var jsdiapo_move_key_auto = "o";
  45. function jsdiapo_init()
  46. {
  47. jsdiapo_move_nfo();
  48. <!--window.onerror = jsdiapo_error;// -->
  49. jsdiapo_move('first');
  50. if(jsdiapo_move_key==1){document.onkeypress=jsdiapo_key_analyse;window.focus();}
  51. }
  52. function jsdiapo_move(choix)
  53. {
  54. if(jsdiapo_images.length-1>jsdiapo_images_max||jsdiapo_images_max==0)
  55. {
  56. alert('JSDIAPO\nErreur 002 : La variable/tableau "jsdiapo_images" est mal configurer ou ne contient qui seul élément
  57. .');
  58. }
  59. <!--window.onerror = jsdiapo_error;// -->
  60. switch(choix)
  61. {
  62. case 'first':
  63. jsdiapo_open(jsdiapo_images[0]);
  64. jsdiapo_images_now="0";
  65. break;
  66. case 'back':
  67. if(jsdiapo_images_now==0)
  68. {
  69. alert('Vous êtes au bout (début)');
  70. }
  71. else
  72. {
  73. jsdiapo_images_now--;
  74. jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
  75. }
  76. break;
  77. case 'next':
  78. if(jsdiapo_images_now==jsdiapo_images.length-1)
  79. {
  80. alert('Vous êtes au bout (fin)');
  81. if(jsdiapo_images_auto!=0){jsdiapo_lanceauto('');}
  82. }
  83. else
  84. {
  85. jsdiapo_images_now++;
  86. jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
  87. }
  88. break;
  89. case 'last':
  90. jsdiapo_images_now=jsdiapo_images.length-1;
  91. jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
  92. break;
  93. default:alert('JSDIAPO\nErreur 001 : Erreur d\'utilisation de la fonction "jsdiapo_move(choix)"');
  94. break;
  95. }
  96. jsdiapo_move_nfo();
  97. }
  98. function jsdiapo_open(whatsrc)
  99. {
  100. document.getElementById('jsdiapo_images_img').src=whatsrc;
  101. }
  102. function jsdiapo_move_nfo()
  103. {
  104. if(jsdiapo_move_nfo_exec!=0)
  105. {
  106. document.getElementById('jsdiapo_move_nfo').innerHTML = jsdiapo_images_now+" | "+jsdiapo_images_max;
  107. }
  108. }
  109. function jsdiapo_key_analyse(keyStroke)
  110. {
  111. isNetscape=(document.getElementById && !document.all);
  112. eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
  113. touche = String.fromCharCode(eventChooser).toLowerCase();
  114. if(touche==jsdiapo_move_key_back)
  115. {
  116. jsdiapo_move('back');
  117. }
  118. if(touche==jsdiapo_move_key_next)
  119. {
  120. jsdiapo_move('next');
  121. }
  122. if(touche==jsdiapo_move_key_first)
  123. {
  124. jsdiapo_move('first');
  125. }
  126. if(touche==jsdiapo_move_key_last)
  127. {
  128. jsdiapo_move('last');
  129. }
  130. if(touche==jsdiapo_move_key_auto)
  131. {
  132. jsdiapo_lanceauto(jsdiapo_images_auto_msec);
  133. }
  134. <!--window.onerror = jsdiapo_error;// -->
  135. window.focus();
  136. }
  137. function jsdiapo_error()
  138. {
  139. jsdiapo_error_report++;
  140. alert('JSDIAPO\nA détecté : '+jsdiapo_error_report+' erreur(s) .\nJSDIAPO n\'a pas put détecter la source .');
  141. return true;
  142. }
  143. function jsdiapo_lanceauto(timeauto)
  144. {
  145. if(jsdiapo_images_auto == "0" )
  146. {
  147. jsdiapo_images_auto = "1";
  148. jsdiapo_move('first');
  149. jsdiapo_images_interval = setInterval("jsdiapo_auto()",timeauto);
  150. jsdiapo_auto();
  151. }
  152. else
  153. {
  154. jsdiapo_images_auto = "0";
  155. clearInterval(jsdiapo_images_interval);
  156. }
  157. }
  158. function jsdiapo_auto(){jsdiapo_move('next');}
  159. <!--window.onerror = jsdiapo_error;// -->
  160. jsdiapo_init();
  161. </script>
  162. </body>
  163. </html>


 
Attention ! Je dois malheureusement mettre un bémol et non des moindres : ce code ne fonctionne qu'avec internet explorer du fait de la présence d'un activeX
 
Je remercie les sites suivant qui ont totalement nourrit ce code :
http://www.asp-php.net/tutorial/sc [...] php?page=2
http://fg.logiciel.free.fr/index2.php

Reply

Marsh Posté le 30-03-2006 à 17:34:39    

Reply

Marsh Posté le 30-03-2006 à 18:23:36    

attention dans le code ci-dessus
&#034; correspond à une double cote Apparemment Copier coller sur le forum transforme certain caractère ou combinaison de caractères

Reply

Marsh Posté le 30-03-2006 à 18:52:19    

tu devrais plutot mette une balise "fixed" plutot que "cpp"

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed