I'm new to XML & XSLT and I'm having a problem with some of my coding. I am trying to create a gallery where the user clicks on the thumbnail images of a artist and it displays a larger image of that art along with the title and description for that particular piece of art. So far I have only been able to display the large image when the user clicks on one of the thumbnails (Using Javascript). What I need is when the user clicks on the thumbnail it also displays the artname and description for the art which was clicked on.
XML code:
XSLT code:
XML code:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<artist>
<artistname>Alexander Akilov</artistname>
<artistcv>Alexander Akilov's pictures are like fragments of eternity frozen in time and lovingly cleansed by their creator of the slightest element of commotion. These calm self-sufficient canvases are cut through by the rays of a wintry sun that are tender and warm like flashes of human emotion passing through a filter of spirituality. Akilov's subjects live in their own slow motion reality, unaware of the frenetic flow of time and not reacting to the changes in life's patterns. This harmony infused with light filled dreams is striking in its purity and complexity and it seems as if it has been superimposed over several parallel layers that are barely touching each other while simultaneously weaving a single stylistic and narrative fabric.
This new series of Akilov's work on show in London is notable for its uncharacteristically cold palette and the depth of its penetration into the very essence of the Eastern esoteric. The subtle almost invisible gradations of cold greys and light blues create the impression of a fantastical mystery floating slowly through boundless time and space. The simple and unsophisticated subject matter is enveloped in a transparent silver haze that softens the sharp angles of reality leaving visible only those large and pure forms that can be easily perceived by the viewer.
Alexander Akilov’s exhibition will be exhibited by Solana Gallery at the Gallery on Cork Street, 28 Cork Street, London, and will open with a festive Preview Evening hosted by Solana Gallery and the artist himself on 24th of April starting at 6:30pm by invitation only. To receive an invitation, please contact us. The exhibition will be open to the public from 24-29 April from 11am-7pm daily.
</artistcv>
<art>
<img>artistpics/akilov-a/1.jpg</img>
<title>Title 1</title>
<description>Watercolor on canvas
500 x 1000</description>
</art>
<art>
<img>artistpics/akilov-a/10.jpg</img>
<title>Title 10</title>
<description>Watercolor on canvas
500 x 1000</description>
</art>
</artist>XSLT code:
Code:
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform"[/URL] version="1.0">
<xsl:template match="/">
<html>
<head>
<title>Solana Gallery - Contemporary russian art</title>
<link href="gallery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
* Visit [URL unfurl="true"]http://www.dynamicDrive.com[/URL] for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<!-- Do not edit IE conditional style below -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="motiongallery2.js">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library ([URL unfurl="true"]www.dynamicdrive.com)[/URL]
* Visit [URL unfurl="true"]http://www.dynamicDrive.com[/URL] for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</script>
<script type="text/javascript" src="dom-drag.js"></script>
<script type="text/javascript" src="ypSimpleScrollC.js"></script>
<script type="text/javascript" src="scroller.js"></script>
<script type="text/javascript" src="iscroller.js"></script>
<script type="text/javascript" src="nav.js"></script>
</head>
<body>
<div class="logo"><a href="index.html"><img src="images/Small_Solana-Logo.png" alt="Solana Gallery Logo" /></a></div>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="artistlist.html">Artists</a></li>
<li><a>Exhibitions</a>
<ul>
<li><a>Recent</a></li>
<li><a>Future</a></li>
<li><a href="past.html">Past</a></li>
</ul>
</li>
<li><a href="contactus.html">Contact Us</a></li>
<li><a>About Us</a>
<ul>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="artservices.html">Art Services</a></li>
<li><a href="clients.html">Clients</a></li>
<li><a href="news.html">News</a></li>
</ul>
</li>
</ul>
<!-- end the menuh div -->
<div class="container">
<h2><xsl:value-of select="artist/artistname"/></h2>
<div class="cv">
<div class="root" id="root0">
<div class="scrollContainer" id="scroll0Container">
<div class="scrollContent" id="scroll0Content">
<p><xsl:value-of select="artist/artistcv"/></p>
</div>
</div>
</div>
</div>
<div class="imgthumb">
<div style="overflow:hidden;">
<div id="motioncontainer" style="width:150px; height:400px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">
<xsl:for-each select="artist/art">
<a href="{img}" rel="enlargeimage::click" rev="bigimg">
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="img" /> </xsl:attribute>
<xsl:attribute name="width">
<xsl:value-of select="110" /> </xsl:attribute>
<xsl:attribute name="height">
<xsl:value-of select="80" /> </xsl:attribute>
</xsl:element>
</a>
</xsl:for-each>
</div>
</div>
</div>
</div>
<div class="imgholder">
<p><xsl:value-of select="art/title"/></p>
<p><xsl:value-of select="art/description"/></p>
<div id="bigimg"></div>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>