Listage de photos en vignettes.

Commenter

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

S'inscrire maintenant

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.

Du même auteur (bertrouf)