Le défi :
Pour afficher le document lié à un article depuis sa vignette, un simple lien classique ouvre ce document dans une fenêtre normale de l’explorateur. Dans le cas d’une image de petites dimensions, il reste alors toute une partie non occupée (bandes blanches); de plus tous les attributs de la fenêtre sont présents par défaut(redimentionnement, ascenceurs, menus, etc.). Comment ouvrir le document dans une fenêtre à sa taille, et en n’attribuant à la fenêtre que les attributs souhaités ?
La solution :
Une solution consiste à ouvrir le document dans un "pop-up" au moyen d’un script Javascript. La fenêtre pop-up s’ajuste à la taille du document, et ses attributs sont passés en paramètres.
En pratique :
Il faut définir dans l’entête du squelette [1] qui contient la boucle article, le script Javascript qui commande l’ouverture d’une fenetre en pop-up :
<script language="JavaScript" type="text/JavaScript">
<!--
function popup(photo, titre, largeur, hauteur) { // Ateliers CYM - Paris
var contenu="<html><head><title>"+titre+"</title></head> <body topmargin='0' leftmargin='0'><p><a href='javascript:self.close()'> <img border='0' src='"+photo+"'></a><div id='Layer1' style='position:absolute; z-index:1; left: 2; top: 2'><i><font size='1' face='Verdana, Arial, Helvetica, sans-serif'>Cliquez sur l\'image pour fermer.</font></i></div></p></body></html>";
var fenetre=open("","","title="+titre+",resizable=no,width="+largeur+", height="+hauteur+"");
fenetre.document.write(contenu);
}
//-->
</script>
Ensuite, dans le corps du squelette, particulièrement au sein d’une boucle qui peut être inspirée de la boucle "portfolio" du squelette "article.html", il faut afficher la vignette de chaque document lié; l’exemple suivant crée un tableau, dont chaque nouvelle ligne contient 3 vignettes clicables :
<table width="550" border="0" cellspacing="0" cellpadding="8">
<B_portfolio>
<tr width=100%>
<BOUCLE_portfolio(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}{doublons}{0,3}>
<td width=33% valign="top" align="center">
<a href=" javascript:popup('#URL_DOCUMENT', '[(#TITRE|spipaddslashes)]', '#LARGEUR', '#HAUTEUR')";> #LOGO_DOCUMENT</a>
[<h3>(#TITRE)</h3>]
[<br>(#DESCRIPTIF)]
</td>
</BOUCLE_portfolio>
<!-- boucle récursive : -->
<BOUCLE_port_rec(BOUCLE_portfolio)></BOUCLE_port_rec>
</tr>
</B_portfolio>
</table>
