begin process at 2012 05 28 11:08:28
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Navigation

 > LISTAGE DE PHOTOS EN VIGNETTES.

LISTAGE DE PHOTOS EN VIGNETTES.


 Information sur la source

Note :
8 / 10 - par 1 personne
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Navigation Niveau :Débutant Date de création :19/05/2004 Vu :19 689

Auteur : bertrouf

Ecrire un message privé
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

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

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


 Sources du même auteur

UN EFFET OPACITÉ SUR LES PHOTOS
FAIRE DES TRAITS D'UN POINT À UN AUTRE

 Sources de la même categorie

Source avec Zip Source avec une capture ANTI-ROBOTS V 1.0 par MacGaliver
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip Source avec une capture NAVIGATEUR INTERNET HAVRET par HAVRETos
Source avec Zip WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator
Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh

Commentaires et avis

Commentaire de raphtaar le 19/01/2010 15:34:20

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

Commentaire de bertrouf le 20/01/2010 03:25:44

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.

 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,608 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales