kflynn982
05-07-2009, 12:09 PM
I made a simple JavaScript photogallery with 6 thumbnails of pictures, and used and "onclick=function()" tag to make the full image appear below it. But now I want to use a XML/XSL version of this. I know how XML works, and have already made that for the gallery, but I'm new to XSL, and don't really know where to get started. Any suggestions?
This was my original JS Gallery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script ="javascript" type="text/javascript">
function showImg1() {
document.getElementById("img").src="jpg1.jpg"
}
function showImg2() {
document.getElementById("img").src="jpg2.jpg"
}
function showImg3() {
document.getElementById("img").src="jpg3.jpg"
}
function showImg4() {
document.getElementById("img").src="jpg4.jpg"
}
function showImg5() {
document.getElementById("img").src="jpg5.jpg"
}
function showImg6() {
document.getElementById("img").src="jpg6.jpg"
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="gallery" name="gallery">
<table width="653" height="495" border="1">
<tr>
<td width="126" height="164"><div id=thumb1 onclick=showImg1()><img src="thumb1.jpg"/></div></td>
<td width="126"><div id=thumb2 onclick=showImg2()><img src="thumb2.jpg"/></div></td>
<td width="379" rowspan="3"><div></div> <img id="img" height="500" width="400" src="" alt="">
</div></td>
</tr>
<tr>
<td height="160"><div id=thumb3 onclick=showImg3()><img src="thumb3.jpg"/></div></td>
<td><div id=thumb4 onclick=showImg4()><img src="thumb4.jpg"/></div></td>
</tr>
<tr>
<td height="161"><div id=thumb5 onclick=showImg5()><img src="thumb5.jpg"/></div></td>
<td><div id=thumb6 onclick=showImg6()><img src="thumb6.jpg"/></div></td>
</tr>
</table>
</form>
</body>
</html>
And this is what I have so far for my new one:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="pictures_xsl.xsl"?>
<!DOCTYPE PhotoGallery SYSTEM 'pictures_dtd.dtd'>
<PhotoGallery>
<thumbs>
<thumbimg><img id="thumb1" src="thumb1.jpg"/></thumbimg>
<thumbimg><img id="thumb2" src="thumb2.jpg"/></thumbimg>
<thumbimg><img id="thumb3" src="thumb3.jpg"/></thumbimg>
<thumbimg><img id="thumb4" src="thumb4.jpg"/></thumbimg>
<thumbimg><img id="thumb5" src="thumb5.jpg"/></thumbimg>
<thumbimg><img id="thumb6" src="thumb6.jpg"/></thumbimg>
</thumbs>
<full>
<fullimg><img id="jpg1" src="jpg1.jpg"/></fullimg>
<fullimg><img id="jpg2" src="jpg2.jpg"/></fullimg>
<fullimg><img id="jpg3" src="jpg3.jpg"/></fullimg>
<fullimg><img id="jpg4" src="jpg4.jpg"/></fullimg>
<fullimg><img id="jpg5" src="jpg5.jpg"/></fullimg>
<fullimg><img id="jpg6" src="jpg6.jpg"/></fullimg>
</full>
</PhotoGallery>
<?xml version="1.0" encoding="utf-8"?>
<!ELEMENT PhotoGallery (thumbs, full)>
<!ELEMENT thumbs (thumbimg)>
<!ELEMENT thumbimg(#PCDATA)>
<!ELEMENT full (fullimg)>
<!ELEMENT fullimg (#PCDATA)>
This was my original JS Gallery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script ="javascript" type="text/javascript">
function showImg1() {
document.getElementById("img").src="jpg1.jpg"
}
function showImg2() {
document.getElementById("img").src="jpg2.jpg"
}
function showImg3() {
document.getElementById("img").src="jpg3.jpg"
}
function showImg4() {
document.getElementById("img").src="jpg4.jpg"
}
function showImg5() {
document.getElementById("img").src="jpg5.jpg"
}
function showImg6() {
document.getElementById("img").src="jpg6.jpg"
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="gallery" name="gallery">
<table width="653" height="495" border="1">
<tr>
<td width="126" height="164"><div id=thumb1 onclick=showImg1()><img src="thumb1.jpg"/></div></td>
<td width="126"><div id=thumb2 onclick=showImg2()><img src="thumb2.jpg"/></div></td>
<td width="379" rowspan="3"><div></div> <img id="img" height="500" width="400" src="" alt="">
</div></td>
</tr>
<tr>
<td height="160"><div id=thumb3 onclick=showImg3()><img src="thumb3.jpg"/></div></td>
<td><div id=thumb4 onclick=showImg4()><img src="thumb4.jpg"/></div></td>
</tr>
<tr>
<td height="161"><div id=thumb5 onclick=showImg5()><img src="thumb5.jpg"/></div></td>
<td><div id=thumb6 onclick=showImg6()><img src="thumb6.jpg"/></div></td>
</tr>
</table>
</form>
</body>
</html>
And this is what I have so far for my new one:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="pictures_xsl.xsl"?>
<!DOCTYPE PhotoGallery SYSTEM 'pictures_dtd.dtd'>
<PhotoGallery>
<thumbs>
<thumbimg><img id="thumb1" src="thumb1.jpg"/></thumbimg>
<thumbimg><img id="thumb2" src="thumb2.jpg"/></thumbimg>
<thumbimg><img id="thumb3" src="thumb3.jpg"/></thumbimg>
<thumbimg><img id="thumb4" src="thumb4.jpg"/></thumbimg>
<thumbimg><img id="thumb5" src="thumb5.jpg"/></thumbimg>
<thumbimg><img id="thumb6" src="thumb6.jpg"/></thumbimg>
</thumbs>
<full>
<fullimg><img id="jpg1" src="jpg1.jpg"/></fullimg>
<fullimg><img id="jpg2" src="jpg2.jpg"/></fullimg>
<fullimg><img id="jpg3" src="jpg3.jpg"/></fullimg>
<fullimg><img id="jpg4" src="jpg4.jpg"/></fullimg>
<fullimg><img id="jpg5" src="jpg5.jpg"/></fullimg>
<fullimg><img id="jpg6" src="jpg6.jpg"/></fullimg>
</full>
</PhotoGallery>
<?xml version="1.0" encoding="utf-8"?>
<!ELEMENT PhotoGallery (thumbs, full)>
<!ELEMENT thumbs (thumbimg)>
<!ELEMENT thumbimg(#PCDATA)>
<!ELEMENT full (fullimg)>
<!ELEMENT fullimg (#PCDATA)>