Listage de photos en vignettes.

Soyez le premier à donner votre avis sur cette source.

Snippet vu 21 494 fois - Téléchargée 27 fois

Contenu du snippet

J'ai une série de photo.
Je veux que quand on clique sur une vignette, la photo s'ouvre.
Plutôt que de taper le code pour les afficher toutes à la suite les unes des autres, j'ai écrit une petite boucle qui affiche toutes les vignettes avec un lien vers la grande image.

Noms des vignettes : petite1.jpg, petite2.jpg, ...
Noms des images : image1.jpg, image2.jpg, ...

Source / Exemple :


<html>
<head>

<script language=Javascript>

function charger(arg,larg){
fen=window.open('','fen','');
fen.document.write("<center><br>IMAGE"+arg+"<br><img src='image"+arg+".jpg' border=0 width="+larg+"><br></center><hr>");
}

function photo(nb){
var i=1;
var largeur=screen.availWidth-100;
for(i=1;i<nb;i++){
document.write("<img src='petite"+i+".jpg' width=170 onClick='charger(");
document.write(i);
document.write(",");
document.write(largeur);
document.write(")'><br><br>");
}
}

</script>

</head>
<body>
Vous cliquez sur la petite photo, et elle s'ajoute en bas de la page d'à côté, en grand.<br>

<script language="javascript">
photo(6);
</script>

</body>
</html>

Conclusion :


Pour modifer deux trois trucs :

-photo(6);
Pour n photos, écrire photo(n+1);

-fen=window.open('','fen','');
Si vous mettez fen=window.open('','_blank',''); vos photos s'ouvriront dans une nouvelle page. Et il devient alors possible de mettre un window.close(); dans la ligne de commande pour refermer les grandes photos d'un clic.

Je conseille d'utiliser les frames, avec la frame "fen" pour les grandes photos. C'est plus beau.

A voir également

Ajouter un commentaire Commentaires
Messages postés
103
Date d'inscription
lundi 10 mai 2004
Statut
Membre
Dernière intervention
10 mars 2010
8
Yataaa, poser une question 6 ans plus tard sur un forum, faut avoir de l'espoir.
Donc pour répondre à la question, n+1 c'est un nombre qu'il faut mettre. Par exemple pour 7 photos, écrire photo(8), et pour 73 photos, écrire photo(74). Bon courage.
Messages postés
3
Date d'inscription
dimanche 20 mai 2007
Statut
Membre
Dernière intervention
19 janvier 2010

Salut,

Ton script javascript m'interesse beaucoup mais que veux-tu dire dans ta conclusion lorsque tu dis pour photos n ecrire n+1 moi j'ai mis dans mon code
<script language="javascript">
photo(n+1);
</script>
Mais du coup je n'ai plus rien qui s'affiche est ce que tu peux m'aider?
Merci
Raph

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.