Galerie d'images Flash

july · le 17 mars 2005

Bonjour,

Je viens de créer une galerie en Javascript. Mais je me rend compte que si je redimensionne ma fenêtre ou si la galerie est consulté sur un autre type d'écran (plus ou moins grand) la galerie n'est pas positionnée au même endroit sur la fenêtre.

Voici mon code HTML :

<table border="0" cellpadding="0" cellspacing="0"> 
 <tr>
  <td background="includes/img/gal_r6_c1.png" width="151" height="49"></td>
  <td background="includes/img/gal_r6_c2.png" width="7" height="49"></td>
  <td background="includes/img/gal_r6_c3.jpg" width="482" height="49"></td>
  <td background="includes/img/gal_r6_c4.png" width="7" height="49"></td>
  <td background="includes/img/gal_r6_c5.png" width="153" height="49"></td>
 </tr>
 <tr>
  <td background="includes/img/gal_r7_c1.png" width="151" height="86"></td>
  <td background="includes/img/gal_r7_c2.png" width="7" height="86"></td>
  <td background="includes/img/gal_r7_c3.jpg" width="482" height="86"></td>
  <td background="includes/img/gal_r7_c4.png" width="7" height="86"></td>
  <td background="includes/img/gal_r7_c5.png" width="153" height="86"></td>
 </tr>
  <td background="includes/img/gal_r8_c1.png" width="151" height="86"></td>
  <td background="includes/img/gal_r8_c2.png" width="7" height="86"></td>
  <td><table border="0" cellpadding="0" cellspacing="0">  
 <tr>
  <td background="includes/img/gal_r8_c3.jpg" width="7" height="182"></td>
  <td background="includes/img/gal_r8_c4.jpg" width="466" height="182" valign="middle">
  <!-- la gallery -->
  
     <DIV id=Layer1 
     style="Z-INDEX: 1; LEFT: 275px; WIDTH: 450px; CLIP: rect(0px 450px 160px 0px); POSITION: absolute; TOP: 400px; HEIGHT: 160px">   
  <table cellSpacing=4 cellPadding=0 border=0>
  <tbody>
   <tr>
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0759.JPG;categorie=10&image=0759')">
     <img src="gal5/images/DCP_0759.JPG" border=1></a></td>
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0760.JPG;categorie=10&image=0760')">
     <img src="gal5/images/DCP_0760.JPG" border=1></a></td>
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0761.JPG;categorie=10&image=0761')">
     <img src="gal5/images/DCP_0761.JPG" border=1></a></td>
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0762.JPG;categorie=10&image=0762')">
     <img src="gal5/images/DCP_0762.JPG" border=1></a></td>  
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0762.JPG;categorie=10&image=0762')">
     <img src="gal5/images/DCP_0762.JPG" border=1></a></td>  
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0762.JPG;categorie=10&image=0762')">
     <img src="gal5/images/DCP_0762.JPG" border=1></a></td>  
    <td><a href="javascript:popup_img('pictures.php?id=DCP_0762.JPG;categorie=10&image=0762')">
     <img src="gal5/images/DCP_0762.JPG" border=1></a></td>            
   </tr>
</tbody>
  </table></div>   
  <!-- fin de la gallery -->
  
  
  </td>
  <td background="includes/img/gal_r8_c5.jpg" width="9" height="182"></td>
 </tr>
 <tr>
  <td background="includes/img/gal_r9_c3.jpg" width="7" height="24"></td>
  <td background="includes/img/gal_r9_c4.jpg" width="466" height="24">
  <!-- tableau de navigation -->
<table cellSpacing=0 cellPadding=0 border=0 align="center">
<tbody>
    <tr>
      <td><a onmouseover="YY_LS('Layer1','0','0',50,10,false);" onmouseout="YY_StopLayerfx('Layer1');" href="#">
       <img height=10 alt=left src="includes/img/precedent1.gif" width=12 border=0 name=precedant></a></td>
      <td><a onmouseover="YY_LS('Layer1','1659','0',50,10,false);" onmouseout="YY_StopLayerfx('Layer1');" href="#">
       <img height=10 alt=right src="includes/img/suivant1.gif" width=12 border=0 name=suivant></a></td>
</tr></tbody>
</table>   
  <!-- fin du tableau -->   
  </td>
  <td background="includes/img/gal_r9_c5.jpg" width="9" height="24"></td>
 </tr>  
 </table>
 </td>
  <td background="includes/img/gal_r8_c4.png" width="7" height="86"></td>
  <td background="includes/img/gal_r8_c5.png" width="153" height="86"></td>  
 </tr>    
</table>

Et voici le code Javascript :

function popup(page,largeur,hauteur) {
var origineX;
var origineY;
var Lecran;
var Hecran;
var CalageH = 0;
var CalageV = -100;
if (navigator.appVersion.substring(0,1) >= 4){
 	if (screen.height <= 768){
   Lecran = largeur;
   Hecran = hauteur;	
 	}
 	else{
   Lecran = screen.width;
   Hecran = screen.height;
 	}
}
else{
 Lecran = largeur;
 Hecran = hauteur;
}
origineX = Math.round((Lecran-largeur)/2)+ CalageH; 
origineY = Math.round((Hecran-hauteur)/2)+ CalageV; 
var fenetre = window.open(page,"fenster","status,height=" + hauteur + ",width=" + largeur + ",resizable=no,left=" + origineX + ",top=" + origineY + ",screenX=" + origineX + ",screenY=" + origineY + ",scrollbars=no,status=no");
fenetre.focus();
}

function go_to_correct_size(){
var x=1040;
var y=720;
window.resizeTo(x,y);
}
function popup_img(page_zoom){
   popup(page_zoom,580,540);
}

function mmedias_swapImgRestore() { 
 var i,x,a=document.mmedias_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function mmedias_preloadImages() { 
 var d=document; if(d.images){ if(!d.mmedias_p) d.mmedias_p=new Array();
   var i,j=d.mmedias_p.length,a=mmedias_preloadImages.arguments; for(i=0; i<a.length; i++)
   if (a[i].indexOf("#")!=0){ d.mmedias_p[j]=new Image; d.mmedias_p[j++].src=a[i];}}
}

function mmedias_findObj(n, d) { 
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mmedias_findObj(n,d.layers[i].document);
 if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function mmedias_swapImage() { 
 var i,j=0,x,a=mmedias_swapImage.arguments; document.mmedias_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=mmedias_findObj(a[i]))!=null){document.mmedias_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
   document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.01
 var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
   d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
 if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function YY_LS(das, ex, ey, dly, sx, loop, dx, dy){//v4.08
//copyright ©2000,2001 Yaromat.com
   var s=MM_findObj(das),d=document,c,t,l,ct,cb,cl,cr,ncl,nct,ncr,ncb,doto,sy=sx,yx,yy,st;
   if(!s.ot){s.ot=(d.layers)?s.top:s.style.top;s.ol=(d.layers)?s.left:s.style.left;}
   with(Math)if(d.layers){
       ct=s.clip.top;cb=s.clip.bottom;cl=s.clip.left;cr=s.clip.right;t=s.top;l=s.left;
       yy=abs(round((ct-ey)/sy));dy=round((ey-ct)/yy);
       yx=abs(round((cl-ex)/sx));dx=round((ex-cl)/yx);
       if(yx<1){dx=0}else{yx--};if(yy<1){dy=0}else{yy--};
       s.clip.top=ct+dy; s.clip.bottom=cb+dy;s.top=t-dy;s.clip.left=cl+dx;s.clip.right=cr+dx;s.left=l-dx;
   }else if ((d.all||d.getElementById)&&s.style.clip){
     st=s.style;
       l=parseInt((d.getElementById)?st.left:st.pixelLeft);t=parseInt((d.getElementById)?st.top:st.pixelTop);
       c=st.clip.match(/rect.(\d+)[a-z,A-Z,\s]+(\d+)[a-z,A-Z,\s]+(\d+)[a-z,A-Z,\s]+(\d+).*/);
       ct=c[1]/1;cr=c[2]/1;cb=c[3]/1;cl=c[4]/1;
       yy=abs(round((ct-ey)/sy));yx=abs(round((cl-ex)/sx));
       dx=(yx<1)?0:round(-(cl-ex)/yx);dy=(yy<1)?0:round(-(ct-ey)/yy);
       ncl=cl+dx;nct=ct+dy;ncr=cr+dx;ncb=cb+dy;
       st.pixelTop=t-dy;st.pixelLeft=l-dx;st.left=l-dx;st.top=t-dy;
       eval("st.clip='rect('+nct+' '+ncr+' '+ncb+' '+ncl+')'");yy--;yx--;
   }
   if(s.yyto)clearTimeout(s.yyto);
   if(yy>0||yx>0){doto=true;}else if(dly>-1&&loop==true){
       if(d.layers){s.left=s.ol;s.clip.left=0;s.clip.right=cr-cl;s.top=s.ot;s.clip.top=0;s.clip.bottom=cb-ct;
       }else{eval("st.clip='rect('+0+' '+(cr-cl)+' '+(cb-ct)+' '+0+')'");st.top=s.ot;st.left=s.ol;}
       doto=true;
   }
   if(doto==true)s.yyto=setTimeout("YY_LS(\""+das+"\","+ex+","+ey+","+dly+","+sx+","+loop+","+dx+","+dy+")",dly);
}

function YY_StopLayerfx(){ //v3.09
//copyright ©1998-2000 Yaromat.com
 var args = YY_StopLayerfx.arguments;var yydiv;
 for (var i=0; i<args.length; i++){
   yydiv=MM_findObj(args[i]);
   if (yydiv&&(document.layers||document.all||document.getElementById)){
     if(yydiv.yyto!=null)clearTimeout(yydiv.yyto);
     if(yydiv.tmtScrollo!=null)clearTimeout(yydiv.tmtScrollo);
   }
 }
}

Si qq1 a une idée ce serait super surtout que je suis une bille en Javascript.

J'ai essayé aussi de faire ma galerie grâce à un truc tout fait Simple Viewer, qui créé une galerie Flash. Mais c limité comme truc...

Aidez moi SVP... je veux finir ma galerie cette semaine !!!!

Merci

Modifié le 17 mars 2005 par july

wilerbloch · le 17 mars 2005

<table border="0" cellpadding="0" cellspacing="0"width="500"> 
 <tr>
  <td width="33%"</td>
  <td width="33%"</td>
  <td width="33%"</td>

 </tr>

juse une sugestion dimensionnez votre tableau comme l'exemple ci dessus la taille des cellule ou du tableau peu être en pixel "chiffre" ou en pourcentage de la fenêtre expl :"100%"

ou en pourcentage du tableau pour chaque cellule.exp'33%

cis dessuu code d'un tableau de 500 pixel avec 3 cellules qui font 1/3 de la longueur du tableau

on peut faire de même avec la hauteur avec la propriété height

un lien interressant pour des ressource html

Modifié le 17 mars 2005 par wilerbloch

july · le 18 mars 2005

Bonjour,

Après m'être énervée un certain nombres d'heures sur une galerie Javascript, je capitule.

Si qq1 pouvait avoir des codes flash GRATUIT pour une galerie, avec gestion des images dans un xml...

J'ai bien trouvé Simple Viewer, maisce n'est pas 100% custumizableet donc cela ne convient pas tout à fait. Si qq1 connait bien Simpla Viewer, je veux bien lui poser 2 ou 3 questions...

Merci beaucoup,

KewlCat · le 21 mars 2005

Tu es bien conscient que ta "galerie" est incluse dans une <DIV> positionnée en +275+400 (en partant du coin supérieur gauche) et a une taille de 450x160, elle-même incluse de manière inline dans une cellule de tableau (ce qui est proscrit, vu que l'on mélange allègrement les display de mode "block" à display de mode "table-cell"...) ?

C'est peut-être de là que vient ton problème de "la galerie n'est pas positionnée au même endroit sur la fenêtre", non ?

Juste par curiosité, tu as comparé ce que donnait l'affichage de cette page avec IE et avec Mozilla ?

Connexion

Pas encore inscrit ?

Galerie d'images Flash

Messages recommandés

july

Lien vers le commentaire

Partager sur d’autres sites

wilerbloch

Lien vers le commentaire

Partager sur d’autres sites

july

Lien vers le commentaire

Partager sur d’autres sites

KewlCat

Lien vers le commentaire

Partager sur d’autres sites

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer