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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU]Faire une gallerie de photo en HTML [SISI CA MARCHE] :)

mfauxock

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 :

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="Generator" content="">
<meta name="date" content="Mercredi 22 Mars 2006">
<title>Galeries d'images des albums photo : Relax.jpg</title>
<style type="text/css">
BODY {color: #d0ffd0; background: #333333; font-family: Helvetica, sans-serif;font-size: 14pt; margin: 4%; }
H1 {color: #d0ffd0;}
TABLE {text-align: center; margin-left: auto; margin-right: auto;}
TD { color: #d0ffd0; padding: 1em}
IMG.photo { border: 1px solid #d0ffd0; }
a:link { color: #b3b3b3; }
a:visited { color: #b3b3b3; }
</style>
</head>
<body>
<div align="center">
<a href="Naptime.jpg.html">
<img class="photo" src="../thumbs/Naptime.jpg" alt="Précédent" title="Précédent" height="64"
width="85">
</a> |  
<a href="../index.html">
<img src="../up.png" title="Index de l'album" alt="Index de l'album" border="0">
</a>  |  
<a href="Silence.jpg.jpg.html">
<img class="photo" src="../thumbs/Silence.jpg.jpg" alt="Suivant" title="Suivant" height="64" width="85">
</a>
<br>
<hr><br>
<br>
<img class="photo" src="../images/Relax.jpg.jpg" alt="Relax.jpg.jpg" title="Relax.jpg.jpg, 640 x 480">
<br>
<br>
</div>
</body>
</html>

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

Publicité

xtof_83

Freeride Spirit

Pour une galerie photo il est impératif de pouvoir faire ç avec PHP

Sinon c'est la merde

mfauxock

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.

bixibu

Ca ... c'est fait!

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

nargy

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

mfauxock

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

Message cité 1 fois

xtof_83

Freeride Spirit

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]

nargy

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.

nargy

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

bixibu

Ca ... c'est fait!

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

Publicité

mfauxock

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

mfauxock

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

nargy

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

mfauxock

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

Message cité 1 fois

nargy

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

xtof_83

Freeride Spirit

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

JS: langage client..donc ça intéragie sur ta machine./

PHP : langage serveur....

:pfff:

mfauxock

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

bixibu

Ca ... c'est fait!

-comment compter le nombre de fichier dans un répertoire ?

Pas possible en javascript.

nargy

javascript ne permet pas de toucher aux fichiers locaux.

phenxdesign

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

phenxdesign

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

bixibu

Ca ... c'est fait!

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

nargy

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.

bixibu

Ca ... c'est fait!

>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.

nargy

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...

bixibu

Ca ... c'est fait!

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

kedare

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

Message cité 2 fois

phenxdesign

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 )

Lorr Hyde

L'univers est trop grand Zut !

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

bixibu

Ca ... c'est fait!

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 )

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

xtof_83

Freeride Spirit

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

bixibu

Ca ... c'est fait!

:pt1cable:

Message cité 1 fois

mfauxock

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Diaporama</title>
</head>
<body>
<button onclick="jsdiapo_move('first')">Premier</button>
<button onclick="jsdiapo_move('back')">Precedent</button>
<button onclick="jsdiapo_move('next')">Suivant</button>
<button onclick="jsdiapo_move('last')">Dernier</button>
<div id="jsdiapo_move_nfo"></div>
<!--var rep
<br-->
<img id="jsdiapo_images_img" border="0">
<script language="javascript">
fso = new ActiveXObject("Scripting.FileSystemObject" );
fold = fso.GetFolder('C:/img');
jsdiapo_images=new Array(); // liste en mémoire
ff = new Enumerator(fold.files);
for (; !ff.atEnd(); ff.moveNext()) {
s=ff.item()
if (".gif.jpg.bmp".indexOf(fso.GetExtensionName(s.name))>0)
jsdiapo_images[jsdiapo_images.length]='C:/img/'+s.name
}
jsdiapo_images.sort()
var jsdiapo_error_report = "0";
var jsdiapo_images_now = "0";
var jsdiapo_images_auto = "0";
var jsdiapo_images_auto_msec = "5000";
var jsdiapo_images_max = jsdiapo_images.length-1;
var jsdiapo_move_nfo_exec = "1";
var jsdiapo_move_key = "1";
var jsdiapo_move_key_first = "7";
var jsdiapo_move_key_back = "4";
var jsdiapo_move_key_next = "6";
var jsdiapo_move_key_last = "9";
var jsdiapo_move_key_auto = "o";
function jsdiapo_init()
{
jsdiapo_move_nfo();

jsdiapo_move('first');
if(jsdiapo_move_key==1){document.onkeypress=jsdiapo_key_analyse;window.focus();}
}
function jsdiapo_move(choix)
{
if(jsdiapo_images.length-1>jsdiapo_images_max||jsdiapo_images_max==0)
{
alert('JSDIAPO\nErreur 002 : La variable/tableau "jsdiapo_images" est mal configurer ou ne contient qui seul élément
.');
}

switch(choix)
{
case 'first':
jsdiapo_open(jsdiapo_images[0]);
jsdiapo_images_now="0";
break;
case 'back':
if(jsdiapo_images_now==0)
{
alert('Vous êtes au bout (début)');
}
else
{
jsdiapo_images_now--;
jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
}
break;
case 'next':
if(jsdiapo_images_now==jsdiapo_images.length-1)
{
alert('Vous êtes au bout (fin)');
if(jsdiapo_images_auto!=0){jsdiapo_lanceauto('');}
}
else
{
jsdiapo_images_now++;
jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
}
break;
case 'last':
jsdiapo_images_now=jsdiapo_images.length-1;
jsdiapo_open(jsdiapo_images[jsdiapo_images_now]);
break;
default:alert('JSDIAPO\nErreur 001 : Erreur d\'utilisation de la fonction "jsdiapo_move(choix)"');
break;
}
jsdiapo_move_nfo();
}
function jsdiapo_open(whatsrc)
{
document.getElementById('jsdiapo_images_img').src=whatsrc;
}
function jsdiapo_move_nfo()
{
if(jsdiapo_move_nfo_exec!=0)
{
document.getElementById('jsdiapo_move_nfo').innerHTML = jsdiapo_images_now+" | "+jsdiapo_images_max;
}
}
function jsdiapo_key_analyse(keyStroke)
{
isNetscape=(document.getElementById && !document.all);
eventChooser = (isNetscape) ? keyStroke.which : event.keyCode;
touche = String.fromCharCode(eventChooser).toLowerCase();
if(touche==jsdiapo_move_key_back)
{
jsdiapo_move('back');
}
if(touche==jsdiapo_move_key_next)
{
jsdiapo_move('next');
}
if(touche==jsdiapo_move_key_first)
{
jsdiapo_move('first');
}
if(touche==jsdiapo_move_key_last)
{
jsdiapo_move('last');
}
if(touche==jsdiapo_move_key_auto)
{
jsdiapo_lanceauto(jsdiapo_images_auto_msec);
}

window.focus();
}
function jsdiapo_error()
{
jsdiapo_error_report++;
alert('JSDIAPO\nA détecté : '+jsdiapo_error_report+' erreur(s) .\nJSDIAPO n\'a pas put détecter la source .');
return true;
}
function jsdiapo_lanceauto(timeauto)
{
if(jsdiapo_images_auto == "0" )
{
jsdiapo_images_auto = "1";
jsdiapo_move('first');
jsdiapo_images_interval = setInterval("jsdiapo_auto()",timeauto);
jsdiapo_auto();
}
else
{
jsdiapo_images_auto = "0";
clearInterval(jsdiapo_images_interval);
}
}
function jsdiapo_auto(){jsdiapo_move('next');}

jsdiapo_init();
</script>
</body>
</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

xtof_83

Freeride Spirit

bixibu a écrit :

:pt1cable:

:heink:

mfauxock

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

phenxdesign

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[valid HTML vs invalid HTML] le saviez-vous ?	[ RESOLU ] pb avec COUNT
[Résolu] Du mal a analyser ce code	[resolu]pb affichage input avec IE et firefox
souci avec player mp3 flash et page html	probleme affichage php/html (simple)
HTML et W3C	[PHP] transformer un fichier PDF en TXT ou HTML(idéalement)
Afficher le lecteur windows media dans une page html	[Résolu] hauteur de tableau a 100%
Plus de sujets relatifs à : [RESOLU]Faire une gallerie de photo en HTML [SISI CA MARCHE] :)

Page générée en 0.174 secondes