nicht angemeldet
Hi
hab versucht das Beispiel (mein Posting wurde bereits gelöscht!?) nachzuvollziehen und anzuwenden, bin aber immer noch auf dem holzweg!? :(
Hier nochmal meine Idee/Vorstellung:
1. Thumbnail-Seite (Bildergalerie)
besteht aus XML file thumbs.xml
und XSL file thumbs.xsl
Jedes Thumb ist verlinkt zu einer Javascript function
thumbs.xml
<lakeDistrict2006>
<thumb name="thumb001.jpg" width="120" height="90" alt="LakeDistrict2006-1"/>
<thumb name="thumb002.jpg" width="120" height="90" alt="LakeDistrict2006-2"/>
<thumb name="thumb003.jpg" width="120" height="90" alt="LakeDistrict2006-3"/>
</lakeDistrict2006>
thumbs.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:template match="lakeDistrict2006">
<html>
<head>
<script type="text/javascript" src="test.js"> </script>
</head>
<body>
<CENTER>
<table cellspacing="10" cellpadding="0" border="0">
<xsl:for-each select="thumb[position() mod 5 = 1]">
<tr>
<xsl:apply-templates select=". | following-sibling::thumb[position() < 5]" />
</tr>
</xsl:for-each>
</table>
</CENTER>
</body>
</html>
</xsl:template>
<xsl:template match="thumb">
<td>
<xsl:if test="(position() = last()) and (last() < 5)">
<xsl:attribute name="colspan">
<xsl:value-of select="6 - last()" />
</xsl:attribute>
</xsl:if>
<a name="photo" href="getPhoto({@alt})"><img src="{@name}" width="{@width}" height="{@height}" alt="{@alt}" /></a>
</td>
</xsl:template>
</xsl:stylesheet>
2. Photo Seite, welche durch click auf ein Thumb generiert wird, soll das einzlne Photo darstellen, eingeleitet durch die Javascript function getPhoto().
photos.xml
<lakeDistrict2006>
<photo name="photo001.jpg" width="450" height="338" alt="LakeDistrict2006-1"/>
<photo name="photo002.jpg" width="450" height="338" alt="LakeDistrict2006-2"/>
<photo name="photo003.jpg" width="450" height="338" alt="LakeDistrict2006-3"/>
</lakeDistrict2006>
photo.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
<xsl:param name="bildid" />
<xsl:template match="lakeDistrict2006">
<html>
<head>
<title>Jens HP - Photos - Lake District 2006</title>
<link rel="stylesheet" type="text/css" href="1st_squad.css"/>
</head>
<body>
<CENTER>
<table cellspacing="10" cellpadding="0" border="0">
<tr>
<xsl:apply-templates select="photo" />
</tr>
</table>
</CENTER>
</body>
</html>
</xsl:template>
</xsl:template>
<xsl:template match="photo">
<td>
<xsl:if test="@alt = $bildid">
<img src="{@name}" width="{@width}" height="{@height}" alt="{@alt}" />
</xsl:if>
</td>
</xsl:template>
</xsl:stylesheet>
Und noch das Javascript file
var XMLDatei = "photos.xml"; // Pafad zur XML-Datei
var XSLDatei = "photo.xsl"; // Pafad zur XSL-Datei
var objectXML;
var objectXSL;
var objectXSLCache;
var objectXSLTProcessor;
function transformation() {
// Abfrage für den Internet Explorer
if (window.ActiveXObject) {
// XML laden
objectXML = new ActiveXObject("MSXML2.DOMDocument");
objectXML.async = false;
objectXML.load(XMLDatei);
// XSL laden
objectXSL = new ActiveXObject("MSXML2.FreeThreadedDOMDocument.4.0");
objectXSL.async = false;
objectXSL.load(XSLDatei);
//cachen das XSLT für bessere performance
objectXSLCache = new ActiveXObject("Msxml2.XSLTemplate.4.0");
objectXSLCache.stylesheet = objectXSL;
}
// Abfrage für Mozilla / Netscape
else if (window.ChromeWindow) {
// Im Mozilla erst XSL laden
objectXSLTProcessor = new XSLTProcessor();
objectXSL = new XMLHttpRequest();
objectXSL.open("GET", XSLDatei, false);
objectXSL.send(null);
objectXSL = objectXSL.responseXML;
objectXSLTProcessor.importStylesheet(objectXSL);
// XML laden
objectXML = new XMLHttpRequest();
objectXML.open("GET", XMLDatei, false);
objectXML.send(null);
objectXML = objectXML.responseXML;
}
else {
alert("Ihr Browser unterstützt leider keine XML-XSL-Transformation mittels JavaScript");
}
getPhoto();
}
function getPhoto(photo)
{
objectXSLTProcessor = objectXSLCache.createProcessor();
objectXSLTProcessor.input = objectXML;
objectXSLTProcessor.addParameter("bildid", photo, "");
objectXSLTProcessor.transform();
}