Tweet
renommer : "galerie.html" (enfin, comme vous voulez) :
Renommer : "agran.html" (sinon ça ne fonctionnera pas) :
1. Créez un dossier Galerie sur votre bureau ;
2. Créez un fichier texte sous un éditeur de texte basique et copiez collez le premier code en le renommant "galerie.html" ;
3. Créez un fichier texte sous un éditeur de texte basique et copiez collez le premier code en le renommant "agran.html" ;
4. Créez un dossier (dans le dossier "Galerie") nommé "photos".
5. Mettez dans ce dossier 24 photos (sur la démo il y a 2 rangées de 6 photos, dont 1 thumbnail et un fullsize par photo - évidemment, faut que ce soit la même photo).
+ je vous joint un fichier de démo pour les photos (bon j'me suis pas fait chier, j'ai chopé les première photos venues sous Google au format 60*120px pour les thumbnails et 480*640 pour les fullsize ; vous téléchargez donc le photos.zip contenant les 24 photos et vous les mettez dans "photos".
Bien sûr vous pouvez jouer avec le CSS pour modifier un peu le tout à souhait, vous pouvez redimensionner le tout à souhait, enfin bref, tout est malléable !
Lien DDL MU photos.zip :
http://www.megaupload.com/?d=AQWPLONG
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Galerie photos, Java Script, Tedheu révision mai_2008</TITLE>
<STYLE type="text/css">
BODY,TD,A,P {font-family:verdana,sans-serif; font-size:11px;}
</STYLE>
<SCRIPT language="JavaScript">
// Bloc javascript principal pour une galerie de photos avec possibilité d'agrandissement en popup
var fenpopup;
// Synthèse des bandes de vignettes photos sous forme d'un tableau HTML
function bdvgt(nub,largbande,replist,imalist,orilist,altlist,leglist) {
// paramètres internes
prfxV= "_vgt"; // préfixe du nom de fichier pour les vignettes
prfxA= "_A"; // préfixe du nom de fichier pour les images en version agrandies
affleg1='oui';
affleg2='oui';
hautleg=15; // hauteur du cartouche de légende
sepcase= 5; // séparation entre case, en pixel
largcase= 170; hautcase= 170; // dimensions des cases
largim= 160; hautim= 120; // dimensions du cadre d'affichage des vignettes (160x120)
// style des cases contenant les vignettes tenant compte d'effets au survol des vignettes
sbord= new Array(2); ccase= new Array(2);
sbord[0]= '2px solid white'; // type et couleur de la bordure
ccase[0]= '#fec'; // couleur de la case
sbord[1]= '2px solid #d63'; // type et couleur de la bordure, curseur sur la vignette
ccase[1]= '#fda'; // couleur de la case, curseur sur la vignette
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: nombre de vignettes par ligne ( une valeur peut être imposée , ajouter une ligne niplg=xx; )
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"> </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";}}}
// Appel à une page dédiée pour l'agrandissement en popup
function agran(rep,image,orien,alt,legende) {
// paramètres internes à la fonction, à modifier au besoin
centrage= 50; pcote= 480; gcote= 640;
signature='T²';
// description des paramètres
// rep : nom du répertoire (ou chemin) où sont placées les photos
// image : nom du fichier de la photo
// orien : orientation de l'image, portrait='port' ou paysage='pays'
// alt : texte de l'infobulle de l'image affichée
// legende : texte pour légender la photo par un texte placé sous la photo
// centrage: positionnement de la fenêtre popup en % de la diagonale, si >100 alors centrage aléatoire
// pcote et gcote: petit coté x grand coté de l'image en popup
// signature : texte court placé en bas à droite
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();">
<!-- votre code HTML -->
<!-- séries de jeu de bandes de vignettes gérées par JavaScript, sous la forme de tableaux HTML -->
<!-- vous pouvez utiliser une ou plusieurs séries, ici pour l'exemple j'en ai mis deux de 6 chacunes -->
<DIV style="text-align:center">
<SCRIPT language="JavaScript">
// taille disponible de l'écran
var scraw= screen.availWidth; scrah= screen.availHeight;
// sous répertoire par défaut
var rep= "photos";
replist= new Array(1);
imalist= new Array(1);
altlist= new Array(1);
orilist= new Array(1);
leglist= new Array(1);
//*** Liste à remplir et à complèter, une ligne par photos (extension .jpg)
//*** ex: n ième photo (n partant de zéro)
//*** replist[n]= nom du répertoire où sont placées les photos, variable rep par défaut
//*** imalist[n]= nom générique de la photo, vignette: nom_vgt.jpg , version agrandie: nom_A.jpg
//*** orilist[n]= orientation de l'image, portrait='port' ou paysage='pays'
//*** altlist[n]= texte infobulle de l'image affichée
//*** leglist[n]= texte pour légender la photos en surimpression (pour le popup), note ajouter 3 antislash devant une apostrophe
</SCRIPT>
<!-- votre code HTML, adaptez le texte titre de la série de bandes de vignettes -->
<B>Série 1:</BBR>
<SCRIPT language="JavaScript">
// ci-dessous exemple pour trois photos 001 002 et 003 (fichiers 001_vgt.jpg, 001_A.jpg , 002_vgt.jpg, 002_A.jpg et etc.)
// fichiers situés dans le sous répertoire par défaut rep (défini plus haut)
replist[0]= rep; imalist[0]= '001'; orilist[0]= 'pays'; altlist[0]= '001'; leglist[0]= 'légende de la photo numéro 1';
replist[1]= rep; imalist[1]= '002'; orilist[1]= 'port'; altlist[1]= ''; leglist[1]= 'légende de la photo numéro 2';
replist[2]= rep; imalist[2]= '003'; orilist[2]= 'port'; altlist[2]= ''; leglist[2]= 'légende de la photo numéro 3';
replist[3]= rep; imalist[3]= '004'; orilist[3]= 'pays'; altlist[3]= '001'; leglist[3]= 'légende de la photo numéro 4';
replist[4]= rep; imalist[4]= '005'; orilist[4]= 'port'; altlist[4]= ''; leglist[4]= 'légende de la photo numéro 5';
replist[5]= rep; imalist[5]= '006'; orilist[5]= 'port'; altlist[5]= ''; leglist[5]= 'légende de la photo numéro 6';
//*** largbande = largeur consacrée aux bandes de vignettes
var largbande= 0.8*scraw;
// la fonction bdvgt renvoie un tableau HTML
bdvgt(1,largbande,replist,imalist,orilist,altlist,leglist);
</SCRIPT>
<!-- votre code HTML -->
<B>Série 2:</BBR>
<SCRIPT language="JavaScript">
// ci-dessous exemple pour trois photos 001 002 et 003 (fichiers 001_vgt.jpg, 001_A.jpg , 002_vgt.jpg, 002_A.jpg et etc.)
// fichiers situés dans le sous répertoire par défaut rep (défini plus haut)
replist[0]= rep; imalist[0]= '007'; orilist[0]= 'pays'; altlist[0]= '001'; leglist[0]= 'légende de la photo numéro 7';
replist[1]= rep; imalist[1]= '008'; orilist[1]= 'port'; altlist[1]= ''; leglist[1]= 'légende de la photo numéro 8';
replist[2]= rep; imalist[2]= '009'; orilist[2]= 'port'; altlist[2]= ''; leglist[2]= 'légende de la photo numéro 9';
replist[3]= rep; imalist[3]= '010'; orilist[3]= 'pays'; altlist[3]= '001'; leglist[3]= 'légende de la photo numéro 10';
replist[4]= rep; imalist[4]= '011'; orilist[4]= 'port'; altlist[4]= ''; leglist[4]= 'légende de la photo numéro 11';
replist[5]= rep; imalist[5]= '012'; orilist[5]= 'port'; altlist[5]= ''; leglist[5]= 'légende de la photo numéro 12';
//*** largbande = largeur consacrée aux bandes de vignettes
var largbande= 0.8*scraw;
// la fonction bdvgt renvoie un tableau HTML
bdvgt(2,largbande,replist,imalist,orilist,altlist,leglist);
</SCRIPT>
</DIV>
<!-- votre code HTML -->
</BODY>
</HTML>
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Agrandissement photos, Tedheu révision mai_2008</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// récupération des variables
var repertoire= '', image= '', hauti=480, largi=640, alt= '', legende='', signature='';
var coingauche=0, coinhaut=0;
var chaineget= window.location.search.substring(1);
var paire= chaineget.split('&');
for (i=0; i<paire.length; i++){
par= paire[i].split('=');
switch (par[0]){
case 'rp': repertoire= unescape(par[1]); break;
case 'nf': image= unescape(par[1]); break;
case 'h': hauti= parseInt(par[1]); break;
case 'l': largi= parseInt(par[1]); break;
case 'alt': alt= unescape(par[1]); break;
case 'lgd': legende= unescape(par[1]); break;
case 'sgn': signature= unescape(par[1]); break;
case 'x': coingauche= parseInt(par[1]); break;
case 'y': coinhaut= parseInt(par[1]); break;}}
var chemin= repertoire+'/';
// texte d'attente avant chargement complet
var txtatten;
(image=='')? txtatten='Erreur:<BRI>pas d\'image définie</I>': txtatten='... Veuillez patienter ...<BRBR>l\'image " '+image+' " est en cours de chargement';
// titre de la fenêtre
text='Image '+image+' ,';
document.title=text+' affichée en '+largi+'x'+hauti+' pixels.';
// hleg= hauteur du cartouche de légende en bas du pop-up, si legende non vide
var hleg= 15; if (legende=='') hleg= 0;
resizeBy(0,hleg);
largf= largi; hautf= hauti+hleg;
</SCRIPT>
<STYLE type="text/css">
BODY {margin:0; padding:0;}
DIV.tout {position:absolute; top:0; left:0; width:100%; height:100%;}
DIV.calque {position:absolute; font-family:verdana, arial; text-align:center;}
#fond {Z-index:0; top:200; left:100; color:blue;}
#image {Z-index:1; top:0; left:0;}
#legende {Z-index:2; bottom:0; left:0; width:100%;}
#legende {text-align:center; font-size:11px; color:#ffa; background-color:black;}
#signature {Z-index:3; bottom:0; right:0; width:80;}
#signature {text-align:right; color:#005; filter:glow(color=#f0f0a0, strength=5);}
</STYLE>
<!-- adaptation du style -->
<SCRIPT LANGUAGE="JavaScript">
document.write('<STYLE type="text/css">');
document.write('#legende {height:'+hleg+';}');
document.write('</STYLE>');
if (image!='') document.getElementById("fond").style.cursor='progress';
function fin(){
if (image!='') document.getElementById("fond").innerHTML='';
document.getElementById("fond").style.cursor='default';
document.getElementById("image").style.cursor='pointer';}
</SCRIPT>
</HEAD>
<BODY topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onload="fin();" onDblclick="self.close();">
<DIV class="tout">
<!-- texte d'attente en couche 0 , par dessous -->
<DIV id="fond" class="calque">
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write('<B>'+txtatten+'</B>');
//-->
</SCRIPT>
</DIV>
<!-- la photo en couche 1 -->
<DIV id="image" class="calque">
<SCRIPT LANGUAGE="JavaScript">
<!--
(alt=='')? attrib_alt='': attrib_alt= 'alt="'+alt+'"';
document.write('<IMG id="img" border="0" src="'+ chemin+ image+ '" width="'+largi+'" height="'+hauti+'" '+attrib_alt+' onClick="javascript:window.close()">');
//-->
</SCRIPT>
</DIV>
<!-- legende en couche 2 , par dessus -->
<DIV id="legende" class="calque">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (legende!='') document.write('<B>'+legende+'</B>');
//-->
</SCRIPT>
</DIV>
<!-- Signature en couche 3 , par dessus -->
<DIV id="signature" class="calque">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (signature!='') document.write('<B>'+signature+'</B>');
//-->
</SCRIPT>
</DIV>
</DIV>
<SCRIPT LANGUAGE="JavaScript">
<!-- // Retouche position et dimensions du POPUP si besoin
hauttitre= 20; bordurex2= 10; if (window.screenTop) bordurex2= 12; // valeurs estimées
hauttitreplusbordure= hauttitre+bordurex2;
largimax= screen.availWidth-bordurex2; hautimax= screen.availHeight-hleg-hauttitreplusbordure;
rahsli=hauti/largi;
// l'image est trop petite, mini 100x100
if (Math.min(largi,hauti)<100){
if (largi<100){larg=100; haut=Math.floor(larg*rahsli);}
if (hauti<100){haut=100; larg=Math.floor(haut/rahsli);}
resizeTo(larg,haut);
clarg= document.body.clientWidth; chaut= document.body.clientHeight;
dlarg= larg-clarg; dhaut= haut-chaut;
resizeBy(dlarg,dhaut);
document.write('<STYLE type="text/css">');
document.write('#signature { font-size:9px;}');
document.write('#image { top:50%; margin-top:'+(-(hauti+hleg)/2)+'; left:50%; margin-left:'+(-largi/2)+';}');
document.write('</STYLE>');}
// la taille de l'image est trop grande
if ((largi>largimax)||(hauti>hautimax)){
if (largi>largimax){largi=largimax; hauti=Math.floor(largi*rahsli);}
if (hauti>hautimax){hauti=hautimax; largi=Math.floor(hauti/rahsli);}
resizeTo(largi+bordurex2,hauti+hauttitreplusbordure);
clienthaut= document.body.clientHeight; clientlarg= document.body.clientWidth;
hauti=clienthaut; largi=Math.floor(hauti/rahsli); // on priviligie la hauteur
deltalarg= largi-clientlarg; resizeBy(deltalarg,hleg);
document.getElementById("img").style.width=largi;
document.getElementById("img").style.height=hauti;
text=text+' image redimentionnée pour l\'affichage - - - -'; document.title=text;
document.write('<STYLE type="text/css">');
document.write('DIV.tout { width:'+largi+'; left:50%; margin-left:'+(-largi/2)+';}');
document.write('</STYLE>');
}
// repositionnement de la fenêtre, si dépassement
margel= screen.availWidth-document.body.clientWidth-bordurex2;
margeh= screen.availHeight-document.body.clientHeight-hauttitreplusbordure;
if (coinhaut>margeh){coinhaut=margeh; moveTo(coingauche,coinhaut);}
if (coingauche>margel){coingauche=margel; moveTo(coingauche,coinhaut);}
</SCRIPT>
</BODY>
</HTML>
2. Créez un fichier texte sous un éditeur de texte basique et copiez collez le premier code en le renommant "galerie.html" ;
3. Créez un fichier texte sous un éditeur de texte basique et copiez collez le premier code en le renommant "agran.html" ;
4. Créez un dossier (dans le dossier "Galerie") nommé "photos".
5. Mettez dans ce dossier 24 photos (sur la démo il y a 2 rangées de 6 photos, dont 1 thumbnail et un fullsize par photo - évidemment, faut que ce soit la même photo).
+ je vous joint un fichier de démo pour les photos (bon j'me suis pas fait chier, j'ai chopé les première photos venues sous Google au format 60*120px pour les thumbnails et 480*640 pour les fullsize ; vous téléchargez donc le photos.zip contenant les 24 photos et vous les mettez dans "photos".
Bien sûr vous pouvez jouer avec le CSS pour modifier un peu le tout à souhait, vous pouvez redimensionner le tout à souhait, enfin bref, tout est malléable !
Lien DDL MU photos.zip :
http://www.megaupload.com/?d=AQWPLONG