OVH Cloud OVH Cloud

modifs de script

4 réponses
Avatar
Damien
Bonjour à tous,
Voila, j'ai trouvé un script intéressant pour faire une sorte d'album photo
ici : http://www.jejavascript.net/visionn.php
j'aimerais pouvoir l'arranger en lui ajoutant quelques petite fonctions
(étant donné mon niveau plus que débutant, je me permet de faire appel à
vous)
Donc voilà ce que j'aimerais ajouter :
1) Au lieu d'entrer le chemin de destination de chaque photos, n'existe
t-il pas un moyens plus simple du style, je lui donne le chemin complet du
dossier ou il y a toute les photos et basta...
2) Je voudrais pouvoir mettre une légende sous chaque photos
3) j'aimerais bien que les boutons précédent et suivant se grisent (fonction
"disabled" je crois) lorsque toutes les photos on été vue (à la première
photo on ne peut pas cliquer sur précédent et à la dernière on ne peut pas
cliquer sur suivant)
4) pour finir je voudrais rajouter un petit compteur du style : photo n°X
sur X photos au total.

Voili voilou,
j'espère que je n'en demande pas trop

D'avance merci pour votre gros coup de main.

DAMIEN__

4 réponses

Avatar
ASM
Bonjour à tous,
Voila, j'ai trouvé un script intéressant pour faire une sorte d'album photo
ici : http://www.jejavascript.net/visionn.php


ici on est sur le ng du javascript
qu'est-ce que c'est que ce php qui vient faire la concurence ? :-)

j'aimerais pouvoir l'arranger en lui ajoutant quelques petite fonctions
(étant donné mon niveau plus que débutant, je me permet de faire appel à
vous)


on est certainement très capable de te faire tout çà
mais tu ne vas pas progresser en javascript

alors si c'est du tout cuit et qui répond à pas mal de tes envies,
voici qque chose que j'aime bien :

http://ygda.free.fr/hscroll2.htm
et
http://ygda.free.fr/hscroll3.htm
et les z'essplications :
http://ygda.free.fr/hscrollScript.htm

Donc voilà ce que j'aimerais ajouter :


si tu veux essayer de comprendre, voici :

1) Au lieu d'entrer le chemin de destination de chaque photos, n'existe
t-il pas un moyens plus simple du style, je lui donne le chemin complet du
dossier ou il y a toute les photos et basta...


ben si et en plus c'est prévu dans ce script !
à la 2 ou 3ième ligne -->
var dossier="im/"
remplacer im/ par ton chemin

et si tu veux tes noms d'images du type '1.jpg' '2.jpg'
et que tu en as 25
remplacer :
var nom = new objet ("imaga.gif", "imagb.gif", "imagc.gif");
par
var nom = new Array();
for(var i=1;i<%;i++) nom[i] = i+'.jpg';


autre possibilité (indépendante de visionn.php) :

chemin = 'http://mon.serveur/mon.site/album1/';
nbre = 27; // nombre de photos
tempo = 3; // attente entre photos
count = 0; // compteur des vues

exemple affichage successif automatique :

function voir() {
// si dernière photo on recommence avec la 1ière
if(count==nbre) count=0;
// on remplace l'image d'affichage par celle de la prochaine photo
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
// augmentation du compteur d'un pas
count++;
// relancer cette fonction dans qques millisecondes
setTimeout('voir()',tempo*1000);
}
onload = voir;

2) Je voudrais pouvoir mettre une légende sous chaque photos


comment ?
il faut avoir toutes les légendes prètes et collées ensemble
legendes ='vue 1,grd mère à st trop,coucher de soleil';
legendes = legendes.split(',');
ou
avoir un fichier html par légende

glisser dans la fonction voir()
à la ligne au-dessus de celle dédiée à l'affichage

document.getElementById('legende').innerHTML = legendes[count];

un(des) passe-vues tout en javascript, à remplissage quasi automatique :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/

3) j'aimerais bien que les boutons précédent et suivant se grisent (fonction
"disabled" je crois) lorsque toutes les photos on été vue (à la première
photo on ne peut pas cliquer sur précédent et à la dernière on ne peut pas
cliquer sur suivant)


ben ... pourquoi ?
çà veut dire que pour revoir les photos on est obligé de revenir en arrière
et donc de re-regarder les plus récemment vues

function voir(sens) {
count = count+sens;
document.monForm.boutonSuivt.disabled = (count==nbre-1);
document.monForm.boutonPrecedt.disabled = (count==0);
if(count>0 && count<nbre)
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
}

pour le visionn.php :
document.vision.precedent.disabled = (numero==1);
document.vision.suivant.disabled = (numero==nom.length);
à mettre dans les fonctions voulues

indice :
(numero==1)
renverra false si numero est différent de 1
sinon
renverra true

4) pour finir je voudrais rajouter un petit compteur du style : photo n°X
sur X photos au total.


oui, bon, pas très dur,

function voir(sens) {
count = count+sens;
if(count>0 && count<nbre) {
document.getElementById('compteur').innerHTML = (+count+1)+'/'+nbre;
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
}
}

Voili voilou,
j'espère que je n'en demande pas trop


je te laisse essayer de réaliser ta fonction voir()
à partir de celles données

à savoir :
dans l'exemple donné : 'voir()'
les photos porteront un nom du genre : p_0.jpg, p_1.jpg etc (de 0 à ...)
et seront dans le dossier 'photos' du dossier 'album1'
du site 'http://mon.serveur/mon.site/'


<form style="text-align:center" name="monForm">
<input type=button value="<<" onclick="voir(-1);" />
<span id="compteur"></span>
<input type=button value=">>" onclick="voir(1);" /><br />
<span id="legende"></span><br />
<img name="voire" src="album.jpg" alt="">
</form>


--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Damien
Premièrement, merci d'avoir répondu à mes questions


si tu veux essayer de comprendre, voici :

1) Au lieu d'entrer le chemin de destination de chaque photos, n'existe
t-il pas un moyens plus simple du style, je lui donne le chemin complet
du dossier ou il y a toute les photos et basta...


ben si et en plus c'est prévu dans ce script !
à la 2 ou 3ième ligne -->
var dossier="im/"
remplacer im/ par ton chemin

et si tu veux tes noms d'images du type '1.jpg' '2.jpg'
et que tu en as 25
remplacer :
var nom = new objet ("imaga.gif", "imagb.gif", "imagc.gif");
par
var nom = new Array();
for(var i=1;i<%;i++) nom[i] = i+'.jpg';


autre possibilité (indépendante de visionn.php) :

chemin = 'http://mon.serveur/mon.site/album1/';
nbre = 27; // nombre de photos
tempo = 3; // attente entre photos
count = 0; // compteur des vues

exemple affichage successif automatique :

function voir() {
// si dernière photo on recommence avec la 1ière
if(count==nbre) count=0;
// on remplace l'image d'affichage par celle de la prochaine photo
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
// augmentation du compteur d'un pas
count++;
// relancer cette fonction dans qques millisecondes
setTimeout('voir()',tempo*1000);
}
onload = voir;

2) Je voudrais pouvoir mettre une légende sous chaque photos


comment ?
il faut avoir toutes les légendes prètes et collées ensemble
legendes ='vue 1,grd mère à st trop,coucher de soleil';
legendes = legendes.split(',');
ou
avoir un fichier html par légende

glisser dans la fonction voir()
à la ligne au-dessus de celle dédiée à l'affichage

document.getElementById('legende').innerHTML = legendes[count];

un(des) passe-vues tout en javascript, à remplissage quasi automatique :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/

3) j'aimerais bien que les boutons précédent et suivant se grisent
(fonction "disabled" je crois) lorsque toutes les photos on été vue (à la
première photo on ne peut pas cliquer sur précédent et à la dernière on
ne peut pas cliquer sur suivant)


ben ... pourquoi ?
çà veut dire que pour revoir les photos on est obligé de revenir en
arrière
et donc de re-regarder les plus récemment vues

function voir(sens) {
count = count+sens;
document.monForm.boutonSuivt.disabled = (count==nbre-1);
document.monForm.boutonPrecedt.disabled = (count==0);
if(count>0 && count<nbre)
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
}

pour le visionn.php :
document.vision.precedent.disabled = (numero==1);
document.vision.suivant.disabled = (numero==nom.length);
à mettre dans les fonctions voulues

indice :
(numero==1)
renverra false si numero est différent de 1
sinon
renverra true

4) pour finir je voudrais rajouter un petit compteur du style : photo n°X
sur X photos au total.


oui, bon, pas très dur,

function voir(sens) {
count = count+sens;
if(count>0 && count<nbre) {
document.getElementById('compteur').innerHTML = (+count+1)+'/'+nbre;
document.images['voire'].src = chemin+'photos/p_'+count+'.jpg';
}
}

Voili voilou,
j'espère que je n'en demande pas trop


je te laisse essayer de réaliser ta fonction voir()
à partir de celles données

à savoir :
dans l'exemple donné : 'voir()'
les photos porteront un nom du genre : p_0.jpg, p_1.jpg etc (de 0 à ...)
et seront dans le dossier 'photos' du dossier 'album1'
du site 'http://mon.serveur/mon.site/'


<form style="text-align:center" name="monForm">
<input type=button value="<<" onclick="voir(-1);" />
<span id="compteur"></span>
<input type=button value=">>" onclick="voir(1);" /><br />
<span id="legende"></span><br />
<img name="voire" src="album.jpg" alt="">
</form>


--
Stephane Moriaux et son [moins] vieux Mac



Oulà j'ai vraiment un train de retard là, faut vraiment que je mette
sérieusement au travail moi....
pour être honnête avec vous, j'ai pratiquement rien compris, ce n'est pas de
votre, c'est juste moi qui suis vraiment pas doué :-Q
pour récapituler :

<head>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
var bauto = 0;
var dossier="photos/2002_2003/montagne/photos/";
var numero = 1;
function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}

var nom = new Array();
for(var i=1;i<;i++) nom[i] = i+'.jpg'
function suivante() {
numero += 1;
if (numero == nom.length + 1) numero = 1;
document.image.src = dossier+nom[numero];
}
function precedente() {
numero -= 1;
if (numero == 0) numero = nom.length;
document.image.src = dossier+nom[numero];
}
function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 1;
document.image.src = dossier+nom[numero];
roll=setTimeout("changer()", 1500);
}
function initial() {
window.clearTimeout(roll);
document.image.src = dossier+nom[numero];
}
function auto() {
if (bauto == 0) {
bauto =1; changer();
document.vision.automat.value=" Lect/Stop ";
}
else {
bauto =0; initial();
document.vision.automat.value=" Lect/Auto ";
}
}
//-->
</script>
</head>

<body>
<form name="vision">
<div align="center">
<p class="Style10">L'album photo </p>
<p>
<input type="button" name="precedent" value="Précédente"
onClick="precedente();">
&nbsp;&nbsp;&nbsp;
<input type="button" name="suivant" value=" Suivante "
onClick="suivante();">
&nbsp;&nbsp;&nbsp;
<input type="button" name="automat" value=" Lect/Auto
"onClick="auto();">
</p>
</div>
</form>
<div align="center">&nbsp;<img
src="photos/2002_2003/montagnes/photos/1.jpg" name="image"
border="1"></div>
</body>

-----------------------------------------------------------------
j'ai essayé d'incorporer les autres fonctions, mais je ne sais pas je dois
vraiment mal m'y prendre car ça ne fonctionne pas
sinon j'ai essayé de télécharger un album présenté sur votre site
(http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/pass_vue/) mais
une fois le zip télécharger, j'ai un message du type "archive est corrompue"

merci encore pour votre aide

DAMIEN


Avatar
ASM

une fois le zip télécharger, j'ai un message du type "archive est corrompue"


encore ?
j'ai bien dû le remettre plusieurs fois !
mais qu'est-ce qu'y m'en font chez wanamangezip ?

Lequel c'était cette fois ?

j'ai essayé d'incorporer les autres fonctions, mais je ne sais pas je dois
vraiment mal m'y prendre car ça ne fonctionne pas


c'est sans doute normal
elles sont prévues pour fonctionner avec le bout
de html donné
(et encore ! pas toutes !)


voici la modif boutons gelés + visu nbre de photos
(pas de titrage pour le moment)

<html>
<head>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/

/***** personnalisation *****/
var dossier="photos/2002_2003/montagne/photos/";
var numero = 1;
var nbre = 19; // nombre de photos
var attente = 1.5 // en secondes (séparateur est un point)

/******** code a ne pas changer **********/
var bauto = 0;
var nom = new Array();
for(var i=1;i<=nbre;i++) nom[i] = i+'.jpg'
function suivante() {
numero += 1;
// ancien code
// if (numero == nom.length + 1) numero = 1;
// nouveau code annulant le bouton
geler();
numerote();
document.image.src = dossier+nom[numero];
}
function precedente() {
numero -= 1;
//ancien code
//if (numero == 0) numero = nom.length;
// nouveau code annulant le bouton
geler();
numerote();
document.image.src = dossier+nom[numero];
}
function changer() {
numero += 1;
if (numero == nbre + 1) numero = 1;
numerote();
document.image.src = dossier+nom[numero];
roll=setTimeout("changer()", attente*1000);
}
function initial() {
window.clearTimeout(roll);
numerote();
document.image.src = dossier+nom[numero];
}
function auto() {
if (bauto == 0) {
bauto =1; changer();
with(document.vision.automat) {
value=" Lect/Stop ";
style.background="red";
}
}
else {
bauto =0; initial();
with(document.vision.automat) {
value=" Lect/Auto ";
style.background="green";
}
}
geler();
}

function numerote() {
if(document.getElementById)
document.getElementById('num').innerHTML=numero+'/'+nbre;
}
function geler() {
document.vision.suivant.disabled=(numero==nbre);
document.vision.precedent.disabled=(numero==1);
}
onload = function() {
numerote();
geler();
};

//-->
</script>
<style type="text/css">
div, p { text-align: center }
.num { border:1px solid black; width: 12em; margin: auto; }
#num { color: maroon }
input { margin: 0 10px; background: #ffc;}
#automat { background: green; color: white; }
</style>
</head>
<body>
<form name="vision">
<div>
<p class="Style10">L'album photo </p>
<p>
<input type="button" name="precedent"
value="Précédente" onClick="precedente();">
<input type="button" name="automat" id="automat"
value=" Lect/Auto "onClick="auto();">
<input type="button" name="suivant"
value=" Suivante " onClick="suivante();">
</p>
<p class="num">Photo : <span id="num"></num></p>
</div>
</form>
<div><img name="image"
src="photos/2002_2003/montagnes/photos/1.jpg"
border="1"></div>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac

Avatar
Damien
"ASM" a écrit dans le message
de news: 436ead71$0$27451$

une fois le zip télécharger, j'ai un message du type "archive est
corrompue"


encore ?
j'ai bien dû le remettre plusieurs fois !
mais qu'est-ce qu'y m'en font chez wanamangezip ?

Lequel c'était cette fois ?


c'était
Autre DIAPORAMA auto-générateur
+ PASSE-VUES et option musique



j'ai essayé d'incorporer les autres fonctions, mais je ne sais pas je
dois vraiment mal m'y prendre car ça ne fonctionne pas


c'est sans doute normal
elles sont prévues pour fonctionner avec le bout
de html donné
(et encore ! pas toutes !)


voici la modif boutons gelés + visu nbre de photos
(pas de titrage pour le moment)

<html>
<head>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/

/***** personnalisation *****/
var dossier="photos/2002_2003/montagne/photos/";
var numero = 1;
var nbre = 19; // nombre de photos
var attente = 1.5 // en secondes (séparateur est un point)

/******** code a ne pas changer **********/
var bauto = 0;
var nom = new Array();
for(var i=1;i<=nbre;i++) nom[i] = i+'.jpg'
function suivante() {
numero += 1;
// ancien code
// if (numero == nom.length + 1) numero = 1;
// nouveau code annulant le bouton
geler();
numerote();
document.image.src = dossier+nom[numero];
}
function precedente() {
numero -= 1;
//ancien code
//if (numero == 0) numero = nom.length;
// nouveau code annulant le bouton
geler();
numerote();
document.image.src = dossier+nom[numero];
}
function changer() {
numero += 1;
if (numero == nbre + 1) numero = 1;
numerote();
document.image.src = dossier+nom[numero];
roll=setTimeout("changer()", attente*1000);
}
function initial() {
window.clearTimeout(roll);
numerote();
document.image.src = dossier+nom[numero];
}
function auto() {
if (bauto == 0) {
bauto =1; changer();
with(document.vision.automat) {
value=" Lect/Stop ";
style.background="red";
}
}
else {
bauto =0; initial();
with(document.vision.automat) {
value=" Lect/Auto ";
style.background="green";
}
}
geler();
}

function numerote() {
if(document.getElementById)
document.getElementById('num').innerHTML=numero+'/'+nbre;
}
function geler() {
document.vision.suivant.disabled=(numero==nbre);
document.vision.precedent.disabled=(numero==1);
}
onload = function() {
numerote();
geler();
};

//-->
</script>
<style type="text/css">
div, p { text-align: center }
.num { border:1px solid black; width: 12em; margin: auto; }
#num { color: maroon }
input { margin: 0 10px; background: #ffc;}
#automat { background: green; color: white; }
</style>
</head>
<body>
<form name="vision">
<div>
<p class="Style10">L'album photo </p>
<p>
<input type="button" name="precedent"
value="Précédente" onClick="precedente();">
<input type="button" name="automat" id="automat"
value=" Lect/Auto "onClick="auto();">
<input type="button" name="suivant"
value=" Suivante " onClick="suivante();">
</p>
<p class="num">Photo : <span id="num"></num></p>
</div>
</form>
<div><img name="image"
src="photos/2002_2003/montagnes/photos/1.jpg"
border="1"></div>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac


Merci beaucoup pour cette aide extrêmement précieuse ;-)

DAMIEN--