Defilement des photos

Je cherche un exemple de script pour placer mes photos sur le web
sous la forme suivant
[...]

Jette un coup d'oeil là : http://ygda.free.fr/hscrollScript.htm

Merci pour aide à tous et surtout pour votre script

Ben moi je préfère le merci après (ou un simple "feedback") ;-)

--
Y.D.

merci

"YD" <yd-news@free.fr> a écrit dans le message de news:
42c1865e$0$31210$636a15ce@news.free.fr...

Je cherche un exemple de script pour placer mes photos sur le web
sous la forme suivant
[...]

Jette un coup d'oeil là : http://ygda.free.fr/hscrollScript.htm

Merci pour aide à tous et surtout pour votre script

Ben moi je préfère le merci après (ou un simple "feedback") ;-)

--
Y.D.

J'ai encore une question
comment fait on pour que cette barre soit centrer j'arrive pas a la centrer
dans ma page

http://ygda.free.fr/hscrollScript.htm

merci pour votre aide encore
j'ai essayé <center></center> mais ca fonctionne pas :(


"YD" <yd-news@free.fr> a écrit dans le message de news:
42c1865e$0$31210$636a15ce@news.free.fr...

Je cherche un exemple de script pour placer mes photos sur le web
sous la forme suivant
[...]

Jette un coup d'oeil là : http://ygda.free.fr/hscrollScript.htm

Merci pour aide à tous et surtout pour votre script

Ben moi je préfère le merci après (ou un simple "feedback") ;-)

--
Y.D.

J'ai encore une question
comment fait on pour que cette barre soit centrer j'arrive pas a la centrer
dans ma page

http://ygda.free.fr/hscrollScript.htm

merci pour votre aide encore
j'ai essayé <center></center> mais ca fonctionne pas :(

Le script est prévu pour un positionnement CSS absolu. Il me
semble difficile de centrer le DIV id="cont" simplement en lui
gardant une largeur fixe. Si la largeur n'est pas impérative,
on peut modifier la balise STYLE ainsi :
#cont{
overflow: hidden;
position:absolute;
top:20px;
width:60%; /*par exemple*/
left:20%; /*idem*/
height: 300px;
background-color:#000;
}
Sinon il faut passer par une fonction pour calculer l'espacement
à gauche pour centrer le DIV appelé sur l'évènement onload et
onresize...

--
Y.D.

Merci c'est vraiment gentil je vais pouvoir placer mes photos
j'ai encore une question voila je voudrais quand je clique sur une photo
l'avoir apparaitre en bas en grand c'est possible ca ? si oui peux tu s'il
te plait me fournir encore
le script ? merci c'est vraiment tres gentil

"YD" <yd-news@free.fr> a écrit dans le message de news:
42c1cc18$0$32357$636a15ce@news.free.fr...

J'ai encore une question
comment fait on pour que cette barre soit centrer j'arrive pas a la
centrer dans ma page

http://ygda.free.fr/hscrollScript.htm

merci pour votre aide encore
j'ai essayé <center></center> mais ca fonctionne pas :(

Le script est prévu pour un positionnement CSS absolu. Il me
semble difficile de centrer le DIV id="cont" simplement en lui
gardant une largeur fixe. Si la largeur n'est pas impérative,
on peut modifier la balise STYLE ainsi :
#cont{
overflow: hidden;
position:absolute; top:20px;
width:60%; /*par exemple*/
left:20%; /*idem*/
height: 300px;
background-color:#000;
}
Sinon il faut passer par une fonction pour calculer l'espacement
à gauche pour centrer le DIV appelé sur l'évènement onload et
onresize...

--
Y.D.

[...]je voudrais quand je clique sur une photo
l'avoir apparaitre en bas en grand c'est possible ca ? si oui peux tu s'il
te plait me fournir encore
le script ?

Le but du newsgroup est plutôt d'aider à écrire des scripts que d'en fournir
de tout prêts... mais bon, ce que tu demandes est plutôt basique.

1. prévoir dans la page un élément IMG correctement positionné qui servira
à afficher les photos en grande taille, contenant l'image de départ
(éventuellement une image "vide"...) :
<img id="photo" src="image_de_départ">

2. ajouter dans le script cette fonction :
function changePhotoSrc(newSrc){
document.getElementById("photo")["src"]=newSrc;
}

3. rajouter un lien sur chaque vignette comme ceci :
<a href="image_agrandie" onclick="changePhotoSrc(this.href); return false;"><img src="vignette"></a>

Au clic sur la vignette, l'image agrandie correspondante s'affichera en
remplaçant l'image précédente. Bien sûr dans les lignes ci-dessus il faut
mettre les bonnes valeurs pour "image_de_départ", "image_agrandie" et
"vignette" !

Ne pas oublier d'ajouter dans la feuille de style les règles suivantes :
1. Pour ne pas avoir une bordure autour des vignettes :
img {border: none}
2. Pour que l'image soit visible entièrement donner au BODY une marge
supérieure ou égale à la hauteur du DIV#cont + ses marges, dans mon
exemple height: 300px margin-top: 20px -> marge haute du BODY minimum
de 320px, ce qui donne dans la feuille de style cette modification :
body{
background-color:#000;
margin-top: 320px; /*ligne à ajouter*/
}

--
Y.D.

Dave wrote:

Merci c'est vraiment gentil je vais pouvoir placer mes photos
j'ai encore une question voila je voudrais quand je clique sur une photo
l'avoir apparaitre en bas en grand c'est possible ca ? si oui peux tu s'il
te plait me fournir encore
le script ? merci c'est vraiment tres gentil

dans le pop-up exemple donné sur le site :

1) Pour le code html (dans le body)
- pour chaque vignette (<img ...)
rajouter le onclick
- rajouter le div d'affichage (montrer) apres le div 'large'

<div id="large">
<span id='bidon'><img alt='' src="images/i1.jpg"
onclick="montre(this);" />
etc etc
... / ...
</span>
</div>
<div id="montrer"></div>

2) Dans le javascript du head rajouter :

function montre(photo) {
// récup de l'url de la vignette
photo = photo.href.toString();
// récup du nom de la vignette
var L = photo.length;
photo = photo.substring(photo.lastIndexOf('/',L),L);
// creation chemin relatif vers la photo
photo = 'photos'+photo;
// affichage de la photo
document.getElementById.innerHTML='<img src="'+photo+'" alt="" />';
}


3) dans la FdS rajouter :

pour avoir la petite main au survol d'une vignette :

#large span img:hover { border: none; cursor: pointer; _cursor: hand;}

pour centrer la grande photo :

#montre { text-align: center }
#montre img { margin: auto }


4) Sur son site on aura au même niveau d'arborescence :
- le fichier du pop-up
- le dossier des vignettes = [images]
- le dossier des photos = [photos]
Les photos ont exactement le même nom de fichier
que les vignettes correspondantes


--
Stephane Moriaux et son [moins] vieux Mac

dans le pop-up exemple donné sur le site :

1) Pour le code html (dans le body)
- pour chaque vignette (<img ...)
rajouter le onclick

J'ai choisi (pour ne pas "brider" l'accès aux images si JS déficient)
de mettre un A autour des images

[...]
4) Sur son site on aura au même niveau d'arborescence :
- le fichier du pop-up
- le dossier des vignettes = [images]
- le dossier des photos = [photos]
Les photos ont exactement le même nom de fichier
que les vignettes correspondantes

J'ai écrit en dur le nom des fichiers. Sûr que j'aurais personnellement
fait comme toi (ou à peu près)pour le stockage des photos/vignettes ,
mais comme Dave a l'air de démarrer, je n'ai pas choisi une solution
trop compliquée.

J'ai mis en ligne mon exemple : <http://ygda.free.fr/hscroll2.htm>
(pour l'image agrandie, je me suis contenté d'agrandir l'image ;-) ).

--
Y.D.

YD wrote:

dans le pop-up exemple donné sur le site :

1) Pour le code html (dans le body)
- pour chaque vignette (<img ...)
rajouter le onclick

J'ai choisi (pour ne pas "brider" l'accès aux images si JS déficient)
de mettre un A autour des images

Oui, j'ai toujours tendance à *un peu* compliquer les choses :-)

et oublier le non JS,
pourtant c'est ce que je regarde en 1er chez les autres !
note, qu'ici, sans JS rien ne fonctionnera de tte façon ;-)


--
Stephane Moriaux et son [moins] vieux Mac

Oui, j'ai toujours tendance à *un peu* compliquer les choses :-)

Je pense que c'est un de mes défauts aussi...

et oublier le non JS,
pourtant c'est ce que je regarde en 1er chez les autres !
note, qu'ici, sans JS rien ne fonctionnera de tte façon ;-)

On n'accède qu'aux premières vignettes, et aux premiéres images
agrandies. Je préfère ne pas savoir comment NS4 se dépatouillerait
de ce HTML-là !

--
Y.D.