bouts de code: passage de paramètres via PHP à la fonction js et appel de la fonction d'affichage: affiche
100 lignes PHP/HTML puis:
echo '<script type="text/javascript"><!--
var islocked=false;
var indexcourant=0;
var nbre='.($n-1).';
var cheminmax="'.$prefixmax.'";
var cheminmin="'.$xprefix.'";
var mesphotos=['.$names.'];
var largeurs=['.$stringl.'];
var hauteurs=['.$stringh.'];
var extjs=['.$extforjs.'];
var codert='.$codrt.';
var ypage="'.$xpage.'";
var ycv='.$xcv.';
if(ycv>0)
{
var cvparam1="'.$ycomment1.'";
var cvparam2="'.$ycomment2.'";
var filetxt1="'.$txtfile1.'";
var filetxt2="'.$txtfile2.'";
affiche(ycv-1, 0);
}
--></script>'; // construction du tableau pour js, (var nbre = $n-1 car la ligne 0 (nom du répertoire et
?>
<!--</div>-->
<?php
début fonction affiche:
function affiche(idx, qui)
{
30 lignes de code puis ce qui est le cas ici (au 1er appel qui=0 (cas spécifique)) on ne déroule pas tout le code du 1er coup, on se rappelle par lanceur au bout de 100ms:
if(qui<2) // lancement par précédent ou suivant et clic sur la mini-photo
{
//document.getElementById('photo').setAttribute("src", cheminmin+mesphotos
+'.jpg'); // ?????????????
setTimeout(lanceur,100); // on temporise le temps que la page noire se charge sinon on observe une déformation de l'image précédente avant son remplacement par la nouvelle image
return;
} else
{
(lanceur rappelle affiche avec les mêmes paramètres mais avec qui=2) ce qui fait qu'au 2ème passage on déroule tout le code et 200 lignes plus loin on termine la fonction par:
} else
{
iddroite.style.opacity=0.5;
ximgid.setAttribute("src", cheminmin+mesphotos
+'.jpg');
text1id.innerHTML=cvparam1;
text2id.innerHTML=cvparam2;
divmodalx.style.display="block"; // zone noire + textes
divmodal2.style.display="block"; // sous-zone de clics
}
bout de code HTML (DIV) auquel s'applique cette fonction (mis en place par PHP dans le cas spécifique):
<div id="modale1">
<img src=# id="photo"/>
</div>
<div id="modalex">
<div id="encaps">
<div id="supyphot"><img src=# id="xphoto"/><div id="text1"></div></div>
<div id="text2"></div>
</div>
</div>
<div id="modale2">
<div id="zonarrowg" onmouseover="opacifie(this)" onmouseout="eclaircie(this)">
<div id="contarrowg">
<a href="javascript:precedent()"><img src="images/arrowg.png" id="arrowg">
</div>
</div>
<div id="zonarrowd" onmouseover="opacifie(this)" onmouseout="eclaircie(this)">
<div id="contcroix">
<a href="javascript:fermer()"><img src="images/croix.png" id="croix">
</div>
<div id="contarrowd">
<a href="javascript:suivant()"><img src="images/arrowd.png" id="arrowd">
</div>
</div>
</div>
bout de CSS:
#modale2
{
display: none; /*--masqué par défaut--*/
position: fixed; left: #; top: #;
width: #; height: #;
z-index: 1200;
}
#photo
{
opacity:1;
margin: 0px;
padding: 0px;
position: relative;
width: #; height: #;
z-index: 1300;
}
#modalex
{
display: none; /*--masqué par défaut--*/
background: black;
position: fixed; left: #; top: #;
width: #; height: #;
opacity: 1;
z-index: 1100;
}
#encaps
{
opacity:1;
/*background: yellow;*/
background:url('images/parchemin.jpg') no-repeat center fixed;
-webkit-background-size: cover;
background-size: cover;
margin: 0px;
padding: 0px;
position: absolute;
border: 2px solid red;
width: #; height: #;
left: #; top: 0px;
z-index: 1300;
}
#supyphot
{
position: absolute;
margin: 0px;
padding: 0px;
width: #; height: #;
left: 0px; top: 0px;
z-index: 1400;
}
#xphoto
{
position: absolute;
display: inline-block;
margin: 0px;
padding: 0px;
border: 1px solid black;
width: #; height: #;
left: 0px; top: 0px;
z-index: 1400;
}
#text1
{
position: absolute;
display: inline-block;
margin: 5px;
padding: 0px;
overflow: hidden;
/*border: 1px solid green;*/
width: #; height: #;
left: #; top: 0px;
z-index: 1500;
}
#text2
{
position: absolute;
margin: 5px;
padding: 0px;
overflow: hidden;
/*border: 1px solid green;*/
width: #; height: #;
left: 0px; top: #;
z-index: 1500;
}
Je ne suis pas sûr que tout ceci apporte plus d'éléments que ma première formulation
