Jean-Christophe Sekinger a écrit :
ZOUKLOVER62@aol.com a écrit (en cette belle journée du 17/10/2006 16:36) :
(...)
nt dans une pop up, au lieu de la même page. Sa doit être du javascript qui fait ça...
Si quelq'un peut m'aider,sa serait cool...
comme tu dis, c'est javascript et ça ne concerne plus vraiment spip... par contre tu trouveras très facilement des scripts sur internet (à la pelle)
Bonjour,
En haut de ton squelette
<BOUCLE_article_principal(ARTICLES) {id_article}>
en bas de ton squelette
</BOUCLE_article_principal>
Dans ton head, tu copies le code suivant :
<SCRIPT LANGUAGE=JavaScript>
function PopupCentrer(page,largeur,hauteur,options) {
var top=(screen.height-hauteur)/2;
var left=(screen.width-largeur)/2;
window.open(page,"","top="+top+",left="+left+",width="+largeur+",height="+hauteur+","+options);
}</SCRIPT>
Dans le corps du message, tu copies le code suivant
<!-- affiche la mosaique -->
<BOUCLE_doc(DOCUMENTS){id_article}{mode=document}{doublons}>
<a href="#URL_DOCUMENT" title="#TITRE">#LOGO_DOCUMENT</a>
</BOUCLE_doc>
ça affiche toutes tes miniatures. Quand on clique sur une d'elle, ça affiche une popup qui ouvre l'image;
Exemple :Murs peints : albums photos de voyages
et juste avant de fermer le body de ta page tu colles le lien suivant :
<script type="text/javascript" src="/squelettes/js/g_img.js">
Ci-dessous le code de ton fichier javascript que tu dois nommer g_img.js et mettre dans ton dossier squelettes.
<!-- Liens image redirigés. Michel Deboom 05/2005 modifié 08/06
// initialisation
D=document;gk=window.Event?1:0 //Gecko;
cpt=sx=sy=dx=dy=e=drag=lock=0
function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
}
// correction IE : cache les éléments select
function voirSelect(v){
elem=document.getElementsByTagName('select');
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}
function grandeImage(){
voirSelect('hidden');cpt=0
//charge l'image dans le cache du navigateur.
im=new Image();im.src=this.href;
// renvoi le title
im1.title=this.title;
//infos sur la fenêtre du navigateur
fen_x=gk?innerWidth-20:db.clientWidth //l fenêtre
fen_y=gk?innerHeight:db.clientHeight //h fenêtre
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
//montre l'entête avec le mot "patientez".
with(gdim.style){display="block";top=sy+2+'px';left=sx+2+'px'};
im1.style.display='none';lx.firstChild.data="Patientez";
actif=setTimeout('controleChargement()',300)
//désactive l'action normale du lien HTML
;return false
}
// controle le chargement de l'image
function controleChargement(){ cpt++
clearTimeout(actif); // arrête le compteur en cours
//if(cpt==1&&im.height<30*!gk+1)alert('image absente ou erreur d\'URL')
lx.firstChild.data+="."; // ajoute "." par seconde
if(im.complete){ // image affichée en fin de chargement
with(im1){style.display='block';src=im.src;width=im.width;height=im.height;
// title reporté dans l'entête
lx.firstChild.data=im1.alt=im1.title
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
// centre l'image dans la fenêtre
gdim.style.left=fen_x/2-gdim.offsetWidth/2+sx+'px';
gdim.style.top=fen_y/2-gdim.offsetHeight/2+sy+'px';
};
}
else actif=setTimeout('controleChargement()',1000)
}
// Création des éléments de la fausse fenêtre
// Conteneur :
gdim=D.createElement("div");D.body.appendChild(gdim);gdim.id="pop";
lx=D.createElement("div");gdim.appendChild(lx);
// Entête :
lx.appendChild(D.createTextNode(""));lx.id="tet";
avs=D.createElement("div");lx.appendChild(avs);
// Pour fermer :
avs.id="croix";avs.title="Fermer";avs.appendChild(D.createTextNode("X"));
avs.onclick=function(){gdim.style.display='none';voirSelect('visible');}
im1=D.createElement("img");gdim.appendChild(im1);
// image :
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
// fonctions de drag&drop ajoutées à gdim
gdim.onmousedown=function(){dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;return false}
gdim.onmouseup=function(){drag=0}
//évènements onclick ajoutés aux liens image
l=D.getElementsByTagName('a');
for(var i=0;i<l.length;++i){
if(l[i].href.search(/.jpg$|.jpeg$|.png$|.gif$/i)!=-1)l[i].onclick=grandeImage;
}
// déplacer l'image à la souris
addEvent(D,"mousemove",function(e){
px=gk?e.pageX:event.clientX+sx; //curseur x
py=gk?e.pageY:event.clientY+sy; //curseur y
if(drag){with(gdim.style){left=px-dx+"px";top=py-dy+"px"};return false}
}
)
// déplacer l'image au clavier
addEvent(D,"keydown",function(e){
tch=gk?e.which:event.keyCode;//alert(tch)
// avec les flèches
if(tch==40||tch==98){gdim.style.top=gdim.offsetTop+50+'px';lock=1;return false}
if(tch==38||tch==104){gdim.style.top=gdim.offsetTop-50+'px';lock=1;return false}
if(tch==37||tch==100){gdim.style.left=gdim.offsetLeft-50+'px'}
if(tch==39||tch==102){gdim.style.left=gdim.offsetLeft+50+'px'}
// cacher l'image avec la touche "Echap"
if(tch==27){gdim.style.display='none';voirSelect('visible');}
})
D.onkeypress=function(){if(lock){lock=0;return false} else return true}
//-->
Et voila. Le tour est joué. BS