From: PENNEC Vincent (vincent.pennec@cub-brest.fr)
Date: 03/11/2003 - 14:16
Bonjour,
Je crois que ton problème est plus un problème de javascript qu'un problème de xml.
Voici cependant un debut de proposition qui je l'espère pourra t'aider
XSL:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<script type="text/javascript">
function ouvrir(image_url)
{
window.open(image_url,"detail_photo","location=no;menubar=no");
}
</script>
<body>
<xsl:apply-templates select="/root/photos" />
</body>
</html>
</xsl:template>
<xsl:template match="/root/photos">
<table>
<xsl:apply-templates select="./photo" />
</table>
</xsl:template>
<xsl:template match="/root/photos/photo">
<!-- si on se trouve en debut de ligne on ajoute un tag tr -->
<xsl:if test="((position()-1) mod /root/planche) = 0"><xsl:text disable-output-escaping="yes"><tr bgcolor="red" ></xsl:text></xsl:if>
<td>
<a href="javascript:ouvrir();">
<xsl:attribute name="href">javascript:ouvrir('<xsl:value-of select="substring-before(.,'MIN')"/>MAX<xsl:value-of select="substring-after(.,'MIN')"/>');</xsl:attribute>
<img>
<xsl:attribute name="src"><xsl:value-of select="."/></xsl:attribute>
</img>
</a>
</td>
<!-- si on se trouve en fin de ligne on ferme le tag /tr -->
<xsl:if test="(((position()) mod /root/planche) = 0) or (position()=last())"><xsl:text disable-output-escaping="yes"></tr></xsl:text></xsl:if>
</xsl:template>
</xsl:stylesheet>
> Bonjour,
>
> j'ai une liste de photos miniatures que j'affiche par rangée
> de 4. Dans une pop-up, je souhaite pouvoir agrandir chaque
> miniature en cliquant dessus. J'ai pensé à la fonction open()
> en javascript, mais je ne sais pas comment ouvrir la pop-up
> correspondant à la miniature. Mon script ouvre une pop-up
> vide (_blank).
>
> Comment ouvrir la bonne pop-up ?
> Cliquer sur photo1_MIN.jpg doit ouvrir pop-up avec photo1_MAX.jpg
On deduit le nom de l'image max a partir du nom de la min
<xsl:value-of select="substring-before(.,'MIN')"/>MAX<xsl:value-of select="substring-after(.,'MIN')"/>');
= photo1_ + MAX + .jpg
= photo1_MAX.jpg
>
> Code XML :
>
> <?xml version="1.0" encoding="ISO-8859-1" ?>
> <planche>
> <groupe>
> <photo>C:\photo1_MIN.jpg</photo>
> <photo>C:\photo2_MIN.jpg</photo>
> <photo>C:\photo3_MIN.jpg</photo>
> <photo>C:\photo4_mIN.jpg</photo>
> </groupe>
> <groupe>
> <photo>C:\photo5.jpg</photo>
> </groupe>
> </planche>
>
La notion de groupe parait un peu "artificielle". Si elle n'est là que pour regrouper les photos par rangées de 4 (=présentation) je propose de stocker l'info sous la forme suivante.
XML:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet type="text/xsl" href="planche.xslt" ?>
<root>
<planche>4</planche>
<photos>
<photo>photo1_min.gif</photo>
<photo>photo2_min.gif</photo>
<photo>photo3_min.gif</photo>
<photo>photo4_min.gif</photo>
<photo>photo5_min.gif</photo>
<photo>photo6_min.gif</photo>
<photo>photo7_min.gif</photo>
</photos>
</root>
Ainsi si tu decides de présenter les photos par groupe de 3 tu auras moins de travail à faire (=> <planche>3</planche>).
> Code XSL :
>
> <script type="text/javascript">
> function openwindow()
> {
> window.open("_blank","my_new_window","tous_les_paramètres")
Au lieu d'ouvrir un document vide ("_blank") tu ouvres directement l'image max :
function ouvrir(image_url)
{
window.open(image_url,"detail_photo","location=no;menubar=no");
}
Location = no & menubar = no permette de supprimer les objets "superflus" pour un popup. Si tes images on une taille fixe n'hésites pas à préciser les objets width & height;
> }
> </script>
>
> <table>
> <xsl:for-each select="planche/groupe">
> <tr>
> <xsl:for-each select="photo">
> <td>
> <a href="javascript:openwindow();">
> <img>
> <xsl:attribute name="src">
> <xsl:value-of select="."/>
> </xsl:attribute>
> </img>
> </a>
> </td>
> </xsl:for-each>
> </tr>
> </xsl:for-each>
> </table>
>
> Ce qui serait super :
>
> comment n'avoir qu'une pop-up html pour toutes les photos ?
Ce comportement s'obtient en donnant toujours le meme "nom" a la popup que tu ouvres.
> Le nom de la photo, passé en paramètre, dirait à la pop-up
> quelle photo il faut ouvrir. Exemple :
> - nom de la pop-up : ma_pop_up
> - cliquer sur photo1_MIN ouvre ma_popo_up(photo1_MAX)
> - cliquer sur photo2_MIN ouvre ma_popo_up(photo2_MAX) :
> c'est la même pop-up, donc pas de multiplication de pop-up.
>
> Comment ensuite, dans ma_pop_up, ajouter des flèches pour
> passer d'une photo à une autre ?
>
Je ne l'ai pas fait dans l'exemple fourni, mais je pense que je procederai ainsi.
Xslt clic
Xml ------> html(1) -------> popup("html(2)")
Dans le html(1) généré tu créées un tableau javascript qui contient les urls des images "max".
Un clic sur la miniature provoque l'ouverture d'une nouvelle fenêtre dans laquelle tu charges une page html qui va communiquer avec la page html(1)
Je pense qu'une aide plus appropriée te sera fournie dans les sections javascript des sites comme
http://www.commentcamarche.net
http://www.editeurjavascript.com
=> rechercher des infos sur l'objet Array, la communication interframe (window.opener.), le changement d'image à la volée.
> Merci à ceux qui pourraient m'aider,
>
> Christophe
>
J'espère que cela a pu t'aider.
Sinon tu peux me mailer en privé (je ne pense pas que l'aspect javascript intéresse l'ensemble des abonnés)
Bon courage.
Vincent.
--
Devenez redacteur <XML>fr et contribuez au developpement du
xml francophone (http://xmlfr.org/infos/redacteurs/) !
Liste de diffusion "xml-tech@xmlfr.org" (http://xmlfr.org).
Cette liste est a votre disposition pour discuter en francais de
tout sujet technique lie a XML.
Pour resilier votre abonnement, envoyez un message contenant
la commande "unsubscribe" a xml-tech-request@xmlfr.org
(mailto:xml-tech-request@xmlfr.org?Subject=unsubscribe)
Archive générée par hypermail 2.1.3 le 28/06/2004 - 11:06 UTC
webmaster@xmlfr.org
| 
