nicht angemeldet
Bildergalerie mit XML/XSL
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();
}
-
Hallo,
hab versucht das Beispiel (mein Posting wurde bereits gelöscht!?)
Nein, es ist ins Archiv gewandert, nachdem einige Tage lang nichts mehr in dem Thread geschrieben wurde (war wohl nicht so wichtig für dich?).
In dienem thumbs.xsl fehlt ein:
<body onload="transformation();" id="ausgabe">photo.xsl
...
<CENTER>
<table cellspacing="10" cellpadding="0" border="0">
<tr><xsl:apply-templates select="photo[@alt = $bildid]" />
</tr>
</table>
</CENTER>...
<xsl:template match="photo">
<td>
<img src="{@name}" width="{@width}" height="{@height}" alt="{@alt}" />
</td></xsl:template>
Und noch das Javascript file
function transformation() {
...
getPhoto();
}So ist es nicht besonder gut, denn so wird die Funktion aufgerufen, ohne dass etwas eigentlich angeklickt wurde und zudem gibt es dann einen Fehler, weil die Funktion getPhoto() eine Variable verlangt, die du hier nicht übergist.
function getPhoto(photo)
{
objectXSLTProcessor = objectXSLCache.createProcessor();...
}
Da brauhst du aber auch eine Unterschiedung zwischen IE und FF/Mozilla:
if (window.ActiveXObject) {
objectXSLTProcessor = objectXSLCache.createProcessor();
objectXSLTProcessor.input = objectXML;
objectXSLTProcessor.addParameter("bildid", photo, "");
objectXSLTProcessor.transform();
document.getElementById("ausgabe").innerHTML = objectXSLTProcessor.output;
}
else if (window.ChromeWindow) {
//var myParam = xsltProcessor.getParameter(null, "bildid");
objectXSLTProcessor.setParameter(null, "bildid", photo);
HTMLAusgabe = objectXSLTProcessor.transformToFragment(objectXML, document);
document.getElementById("ausgabe").innerHTML = "";
document.getElementById("ausgabe").appendChild(HTMLAusgabe);
}Grüße
Thomas