Galerie photo en javascript

**stormfever** · 09/02/2012, 19h20

Bonjour,

Afin que mon problème soit claire je vais tout d'abord vous expliquer ou j'en suis, ce que je j'aimerais et la question sera donc comment on fait ce que j'aimerais avec ce que j'ai

dans la pratique c'est plus simple!

où j'en suis? :
J'ai créer un site de galerie photo afin d'exposer mes clichés d'orages et divers autres chose bref ceux-ci sont présentés sous forme de galerie.
ces galerie forment un seul bloc (une seul série par page).

ce que j'aimerais:
Étant donné que plusieurs photos peuvent concerné un même orage ou autre évènement je souhaiterais en quelques sorte réutiliser le même principe (script ligne 179) pour présenter plusieurs galerie séparé sur une même page (tentative à la ligne 200) le principe que je voudrais utiliser serais celui d'articlemais des articles comportant la mini galerie photos avec agrandissement popup.

ce que j'ai:
A présent toutes les modifications que j'ai tenté se sont soldées par des échec car j'affiche des photos différentes sur une seconde galerie OK mais les photos de la première galerie viennent la complété et impossible de remédier à ça je pense à un problème dans une des 2 boucles "for" mais vue que je ne suis pas programmeur j'ai pris un scripte sur internet que j'ai adapter à mon site mais c'est vraiment pas évident car j'ai fait des études de réseaux et la programmation objet n'est vraiment pas mon fort!

Le code source se présente en 2 fichier, le premier c'est la page de la galerie elle même et le 2ème le fichier qui gère l'agrandissement en popup des photos, si vous voulez voir un exemple dites moi je ne voudrais pas faire de publicité intempestive pour mon site ce n'est pas le but de ce billet ni la place ^^

Pour faire marcher ce script j'ai un css à la racine puis le dossier nuage à l’intérieur duquel j'ai la page galerie.html, agran.html et le dossier photos qui comprend des vignette (001_vgt, 002_vgt...) affichées sur la page galerie et les agrandissement (001_A, 002_A, 003_A...) géré par agran.html en popup.

Le script principal:
C'est assez brouillon j'ai de gros projet d'optimisation du code mais je peu rien faire tant que j'ai pas régler ce problème et je m'en excuse d'avance!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
</STYLE>
 <link rel="stylesheet" media="screen" type="text/css" title="design" href="../design.css" >
<SCRIPT type="text/javascript" language="JavaScript">
var fenpopup;
function bdvgt(nub,largbande,replist,imalist,orilist,altlist,leglist) {
  prfxV= "_vgt";
  prfxA= "_A"; agrandies
  affleg1='oui';
  affleg2='oui';
  hautleg=15;
  sepcase= 5; 
  largcase= 170; hautcase= 170; 
  largim= 160; hautim= 120; 
  sbord= new Array(2); ccase= new Array(2);
  sbord[0]= '2px solid white';
  ccase[0]= '#000000';
  sbord[1]= '2px solid black';
  ccase[1]= '#21498D';
  document.write('<STYLE type=text/css>');
  document.write('TD.vgt {background-color: '+ccase[0]+'; text-align:center; border: '+sbord[0]+';}');
  document.write('DIV.legende {Z-index:0; position:relative; font-size:10px; width:100%; height:'+hautleg+'px;}');
  document.write('DIV.legende1,.legende2 {position:absolute; top:0; left:0; width:100%; background-color:black;}');
  document.write('DIV.legende1 {Z-index:1; color:white; height:100%; overflow:hidden;}');
  document.write('DIV.legende2 {Z-index:2; color:white; left:-10%; width:120%; border: 2px solid #ff0; visibility:hidden;}');
  document.write('</STYLE>');
 
  niplg= Math.floor(largbande/largcase); if (niplg==0) niplg=1;
  niplg=5;
  nima= imalist.length;
  nbd= Math.ceil(nima/niplg); iima= 0; iilg= 0;
  document.write('<TABLE border="0" cellpadding="0" cellspacing="'+sepcase+'" style="margin:auto;">');
  for (ibd=1; ibd<=nbd; ibd++){
  document.write('<TR>');
    for (i=0; i<niplg; i++){
      if (iima<nima){
        switch (orilist[iima]){
          case 'pays': widthandheight='width="'+largim+'" height="'+hautim+'" style="top:50%; margin-top:'+((hautcase-hautim)/2)+';"'; break;
          case 'port': widthandheight='width="'+hautim+'" height="'+largim+'" style="top:50%; margin-top:'+((hautcase-largim)/2)+';"'; break;
        } 
      document.write('<TD class="vgt" id="im'+nub+iima+'" width="'+largcase+'" align="center">');
      document.write('<DIV style="height:'+hautcase+';">');     
      lien_popup= 'javascript:agran(''+replist[iima]+'',''+imalist[iima]+prfxA+'.jpg',''+orilist[iima]+'',''+altlist[iima]+'',''+leglist[iima]+'')';
     (altlist[iima]=='')? attrib_alt='': attrib_alt= ' alt="'+altlist[iima]+'"';
     evenement= ' onMouseover="javascript:gestion(''+nub+iima+'',1,sbord,ccase);" onMouseOut="javascript:gestion(''+nub+iima+'',0,sbord,ccase);"';
     document.write('<A href="'+lien_popup+'"><IMG src="'+replist[iima]+'/'+imalist[iima]+prfxV+'.jpg" '+widthandheight+' border="0"'+attrib_alt+evenement+'></A>');
     document.write('</DIV>');
     if (affleg1=='oui'){
       document.write('<DIV class="legende" id="lg'+nub+iima+'">');
      document.write('<DIV class="legende1">'+imalist[iima]+'</DIV>');
     }else{
       document.write('<DIV class="legende" id="lg'+nub+iima+'" style="height:0px;">');
     }
     if ((affleg2=='oui')&&(leglist[iima]!='')) document.write('<DIV class="legende2" id="lg2'+nub+iima+'">'+leglist[iima].replace('\\','')+'</DIV>');
     document.write('</DIV>');
     document.write('</TD>');
      }
      else{
       document.write('<TD class="vgt" width="'+largcase+'" align="center">&nbsp;</TD>');
      }
      iima++;
    }
  document.write('</TR>');
  }
  document.write('</TABLE>');
}
// Gestion du survol des vignettes
function gestion(etiq,v,sbord,ccase) {
  if (document.getElementById){
    document.getElementById('im'+etiq).style.border=sbord[v];
    document.getElementById('im'+etiq).style.backgroundColor=ccase[v];
    if (v==1){
      document.getElementById('lg'+etiq).style.zIndex="1";
      document.getElementById('lg2'+etiq).style.visibility="visible";
    }
    if (v==0){
      document.getElementById('lg'+etiq).style.zIndex="0";
      document.getElementById('lg2'+etiq).style.visibility="hidden";
    }   
  }
}
function agran(rep,image,orien,alt,legende) {
  centrage= 50; pcote= 480; gcote= 640;
  signature='T²';
  switch (orien){
    case 'pays': haut= pcote; larg= gcote; break;
    case 'port': haut= gcote; larg= pcote; break;
  }
  margel=screen.availWidth-larg-4; if (margel<0) margel=0;
  margeh=screen.availHeight-haut-32; if (margeh<0) margeh=0;
  if (centrage<0) centrage=0;
  if (centrage<=100){
    coinG= centrage/100*margel; coinH= centrage/100*margeh;
   }else{
    coinG=Math.random()*margel; coinH=Math.random()*margeh;
  }
  coinG=parseInt(coinG); coinH=parseInt(coinH);
  adresseGet='agran.html?rp='+rep+'&nf='+image+'&h='+haut+'&l='+larg+'&alt='+alt+'&lgd='+legende+'&sgn='+signature+'&x='+coinG+'&y='+coinH;
  if (fenpopup!=undefined) fenpopup.close();
  fenpopup= window.open(adresseGet,'','toolbar=no,width='+larg+',height='+haut+',left='+coinG+',top='+coinH+',directories=no,location=no,status=no,scrollbars=no,resizable=yes,menubar=no') ;
}
</SCRIPT>
 
</HEAD>
 
<BODY OnUnload="if(fenpopup!=undefined) fenpopup.close();">
 
<!-- code HTML entête -->
       <div id="en_tete" style="width: auto; height:159px; position: relative; left: 0px; top: 0px;" class="style1">
       </div>
 
<!-- code HTML bloc main (menu+corps) -->	   
<div id="main">
 <!-- code HTML menu -->
       <div id="menu" style="width: 199px; position: static; float: left; height: auto; white-space: normal; line-height: normal;">        
           <div class="element_menu">
              <div class="titre">Menu</div>  
				   <li><a href="../index.html">accueil</a></li>
                   <li><a href="../orage/oragecx.html">Orages</a></li>
                   <li><a href="../gelegivre/galeriegelgivre.html">Gèle, givre</a></li>
				   <li><a href="../pluie_grele_inond/pgi.html">Pluie, grêle, inondation</a></li>
				   <li>>Nuages</li> 
				   <li><a href="../phenomenes_tourbillonnaires/galeriepht.html">Phénomènes tourbillonnaires</a></li>
				   <li><a href="../liens/liens.html">liens</a></li>
				   </ul> 
     		  date création: 06/02/2012<br />
			   copyright S.Guillot
           </div>       
       </div>
<br/>
<!-- fin code HTML menu -->
 
 
 <!-- code HTML corps + article -->
       <div id="corps" class="style2" style=" position: relative; margin-left: 225px; top: -20px; width: auto; height: auto; left: 0px; white-space: normal;">
		<div id="article">	   
 
 
<SCRIPT language="JavaScript">
var scraw= screen.availWidth; scrah= screen.availHeight;
var rep= "photos";
replist= new Array(1);
imalist= new Array(1);
altlist= new Array(1);
orilist= new Array(1);
leglist= new Array(1);
</SCRIPT>
 
<SCRIPT type="text/javascript" language="JavaScript">
replist[0]= rep; imalist[0]= '001'; orilist[0]= 'pays'; altlist[0]= '001'; leglist[0]= '';
replist[1]= rep; imalist[1]= '002'; orilist[1]= 'pays'; altlist[1]= ''; leglist[1]= '';
replist[2]= rep; imalist[2]= '003'; orilist[2]= 'pays'; altlist[2]= ''; leglist[2]= '';
replist[3]= rep; imalist[3]= '004'; orilist[3]= 'pays'; altlist[3]= ''; leglist[3]= '';
var largbande= 0.8*scraw;
bdvgt(1,largbande,replist,imalist,orilist,altlist,leglist);
</SCRIPT>
 
		</div><!-- code HTML fin article -->
 
 
<div id="article"  > 
//tentative de création d'une 2ème liste dans un 2ème billet "article"
<B>Série 2:</B><BR>
<SCRIPT language="JavaScript">
replist[0]= rep; imalist[0]= '015'; orilist[0]= 'pays'; altlist[0]= '001'; leglist[0]= '';
replist[1]= rep; imalist[1]= '016'; orilist[1]= 'port'; altlist[1]= ''; leglist[1]= '';
replist[2]= rep; imalist[2]= '017'; orilist[2]= 'port'; altlist[2]= ''; leglist[2]= '';
var largbande= 0.8*scraw;
bdvgt(2,largbande,replist,imalist,orilist,altlist,leglist);
</SCRIPT>
</div>
 
 
	</div><!-- code HTML fin corps -->
</div><!-- code HTML fin main -->

quelles solutions me proposez vous sans changer de langage ou les graphismes du site?

Je vous remercie grandement d'avance et désolé pour le pavé!

Cordialement .

Stormfever.

**ticroch** · 10/02/2012, 10h36

Salut,

je n'ai pas lu ton code, mais je pense que tu pourrais largement simplifier en utilisant un plug-ins. perso j'utilise jQuery Galleria, et en 10 lignes de codes tu créé une ou plusieurs galleries sur ta page !!

Galerie photo en javascript

JavaScript

Discussions similaires

Partager

Partager