thesprucegoose
05-28-2009, 05:18 PM
Hello,
I'm very new to XSLT and would appreciate any help given.
I need to format this .XML page so that:
1) The date | location | logo are all on the same line
2) Each of the date | location | logo is representative of each line of pictures. I need each one of the date | location | logo's to be above each line of pictures.
Attached:
Screenshot of what I'm talking about.
--thesprucegoose
XSLT:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Wild Earth: Deep Ocean Safari</title>
<style type="text/css">
#container{
width:800px;
margin: 0 auto;}
.logo{
float:right;
margin-right:135px;}
#photoSet{
margin-top:150px;
}
</style>
</head>
<body style="background-color:#003300">
<div id="container">
<br />
<div id="photoSet" align="center">
<xsl:for-each select="main/user/photos/photo">
<a href="{url}">
<img style="border:0; margin:5px; width:10%; height:10%;" src="{url}"></img>
</a>
<!--<p>
<xsl:value-of select="main/user/instance/@date"/>
</p>-->
<xsl:if test="position() mod 6 = 0">
<br/>
</xsl:if>
<!--<xsl:for-each select="../../instance">
<p>
<xsl:value-of select="@date"/>
</p>
</xsl:for-each>-->
</xsl:for-each>
</div>
</div>
<xsl:for-each select="main/user/instance">
<div>
<h2>
<xsl:value-of select="@date"/>
|
<xsl:value-of select="../location/@name"/>
|
</h2>
<img width="5%" height="5%">
<xsl:attribute name="src">
<xsl:value-of select="../location/logo"/>
</xsl:attribute>
</img>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="wedos.xslt"?>
<main>
<user name="" email="wedos@etcusa.com" rode_the_ride="5">
<instance id="305" date="2009_05_28"/>
<location id="12" name="South Carolina Aquarium" sysname="SCA_102757" city="Charleston" state="SC">
<url>http://www.scaquarium.org/</url>
<logo>http://www.wildearthride.com/html/loclogos/SCA_favicon.PNG</logo>
</location>
<sponsors>
<sponsor id="2" name="McDonalds" sysname="mcdonalds">
<url>http://www.mcdonalds.com</url>
<logo>http://www.wildearthride.com/html/sponsorlogos/arch.jpg</logo>
</sponsor>
<sponsor id="3" name="Burger King" sysname="burgerking">
<url>http://www.burgerking.com</url>
<logo/>
</sponsor>
</sponsors>
<photos>
<photo id="1001" depth="1009">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic1.jpg</url>
<caption>Sperm Whale Swimming</caption>
<photospecies/>
</photo>
<photo id="1002" depth="822">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic2.jpg</url>
<caption>Curious Humboldt Squid</caption>
<photospecies/>
</photo>
<photo id="1003" depth="0">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic3.jpg</url>
<caption>Sea Otter Grooming</caption>
<photospecies/>
</photo>
<photo id="1004" depth="257">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic4.jpg</url>
<caption>Pacific Bluefin Tuna Swimming</caption>
<photospecies/>
</photo>
<photo id="1005" depth="0">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic5.jpg</url>
<caption>Common Murre Floating</caption>
<photospecies/>
</photo>
<photo id="1006" depth="32">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic6.jpg</url>
<caption>Red Sea Urchin</caption>
<photospecies/>
</photo>
</photos>
</user>
</main>
I'm very new to XSLT and would appreciate any help given.
I need to format this .XML page so that:
1) The date | location | logo are all on the same line
2) Each of the date | location | logo is representative of each line of pictures. I need each one of the date | location | logo's to be above each line of pictures.
Attached:
Screenshot of what I'm talking about.
--thesprucegoose
XSLT:
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Wild Earth: Deep Ocean Safari</title>
<style type="text/css">
#container{
width:800px;
margin: 0 auto;}
.logo{
float:right;
margin-right:135px;}
#photoSet{
margin-top:150px;
}
</style>
</head>
<body style="background-color:#003300">
<div id="container">
<br />
<div id="photoSet" align="center">
<xsl:for-each select="main/user/photos/photo">
<a href="{url}">
<img style="border:0; margin:5px; width:10%; height:10%;" src="{url}"></img>
</a>
<!--<p>
<xsl:value-of select="main/user/instance/@date"/>
</p>-->
<xsl:if test="position() mod 6 = 0">
<br/>
</xsl:if>
<!--<xsl:for-each select="../../instance">
<p>
<xsl:value-of select="@date"/>
</p>
</xsl:for-each>-->
</xsl:for-each>
</div>
</div>
<xsl:for-each select="main/user/instance">
<div>
<h2>
<xsl:value-of select="@date"/>
|
<xsl:value-of select="../location/@name"/>
|
</h2>
<img width="5%" height="5%">
<xsl:attribute name="src">
<xsl:value-of select="../location/logo"/>
</xsl:attribute>
</img>
</div>
</xsl:for-each>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="wedos.xslt"?>
<main>
<user name="" email="wedos@etcusa.com" rode_the_ride="5">
<instance id="305" date="2009_05_28"/>
<location id="12" name="South Carolina Aquarium" sysname="SCA_102757" city="Charleston" state="SC">
<url>http://www.scaquarium.org/</url>
<logo>http://www.wildearthride.com/html/loclogos/SCA_favicon.PNG</logo>
</location>
<sponsors>
<sponsor id="2" name="McDonalds" sysname="mcdonalds">
<url>http://www.mcdonalds.com</url>
<logo>http://www.wildearthride.com/html/sponsorlogos/arch.jpg</logo>
</sponsor>
<sponsor id="3" name="Burger King" sysname="burgerking">
<url>http://www.burgerking.com</url>
<logo/>
</sponsor>
</sponsors>
<photos>
<photo id="1001" depth="1009">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic1.jpg</url>
<caption>Sperm Whale Swimming</caption>
<photospecies/>
</photo>
<photo id="1002" depth="822">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic2.jpg</url>
<caption>Curious Humboldt Squid</caption>
<photospecies/>
</photo>
<photo id="1003" depth="0">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic3.jpg</url>
<caption>Sea Otter Grooming</caption>
<photospecies/>
</photo>
<photo id="1004" depth="257">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic4.jpg</url>
<caption>Pacific Bluefin Tuna Swimming</caption>
<photospecies/>
</photo>
<photo id="1005" depth="0">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic5.jpg</url>
<caption>Common Murre Floating</caption>
<photospecies/>
</photo>
<photo id="1006" depth="32">
<url>http://www.wildearthride.com/html/ridephotos/SCA_102757__2009_05_28__15_45_03/pic6.jpg</url>
<caption>Red Sea Urchin</caption>
<photospecies/>
</photo>
</photos>
</user>
</main>