Image Thumbnail viewer and XML/XSL

[djmothra]

Sorry i have posted this on the Dynamic drive page too (as that is where the code is from) but no-one there can help me...

my thumbnail viewer works (albeit with the little red crosses instead of images), as i'm trying to get the images from an XML file...

the javascript code in my XSL looks like:

<a href="L_IMAGE" onClick="return enlarge('L_IMAGE',event)"><img src="T_IMAGE" border="0"/></a>

does anyone know what i need to do to be able to get the images to appear?
(the XSL code for images is:

<xsl:element name="img"><xsl:attribute name="src"><xsl:value-of select="L_IMAGE"/></xsl:attribute></xsl:element>

and this cannot be just inserted...)

Everything else works - the XML is bought out properly (so my parser is fine) and the draggable image box works too (but as i said no image inside it...)

Cheers

djmothra/jase

[jkd]

No need for all the xsl elements:

<img src="{L_IMAGE}"/>

Make sure the default namespace has the XHTML ns though (make sure to declare xmlns in the root html tag in your template).

[djmothra]

Thanks for your reply!!

ok, am using this:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

i'm probably missing something really obvious...but

take a look: [edit - click on images to see thumbnail - and i know it doesn't look good yet!!!]

http://www.centerprise.co.uk/thumbnailtest.asp

my XML looks like:

<?xml version="1.0" encoding="ISO8859-1" ?>
<ITEMS>

<ITEM>
<NAME>Spectre</NAME>
<MANUFACTURER>DC Shoe Company</MANUFACTURER>
<COST>65.00</COST>
<T_IMAGE>smalltest.gif</T_IMAGE>
<L_IMAGE>largetest.gif</L_IMAGE>
</ITEM>

<etc...

i need to read out the images from the XML into the following line of code,

<a href="L_IMAGE" onClick="return enlarge('L_IMAGE',event)"><img src="T_IMAGE" border="0"/></a>

as you see from the page - the javascript works, but does not read the images...

cheers!

[jkd]

I'm looking at the page, and am not seeing any XML whatsoever?

Is it transformed on the server side? Do you want to dynamically import it with JS? You have to be slightly more specific.

[djmothra]

It's all client side - you can't see the XML because i have used the XSL to make it look like what i want it too (well, sort of!), so it needs to be dynamic...

i'm beginning to think that i probably can't be done...

anyway full XML is here:

http://www.centerprise.co.uk/thumbnailtest.xml

parser is on http://www.centerprise.co.uk/thumbnailtest.asp

[djmothra]

Don't worry, have now sorted it...

the line of javascript need to be completely converted to XSL, so:

<a href="L_IMAGE" onClick="return enlarge('L_IMAGE',event)"><img src="T_IMAGE" border="0"/></a>

would look like:

<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="L_IMAGE"/></xsl:attribute>
<xsl:attribute name="onClick">return enlarge('<xsl:value-of select="L_IMAGE"/>',event)</xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src"><xsl:value-of select="T_IMAGE"/></xsl:attribute>
<xsl:attribute name="border"><xsl:value-of select="BORDER"/></xsl:attribute>
</xsl:element>
</xsl:element>

thanks for help though...

[jkd]

I don't understand why you continue to use such lengthy syntax:

<a href="{L_IMAGE}" onclick="return enlarge('{L_IMAGE}', event)">
<img src="{T_IMAGE}" border="{BORDER}"/>
</a>

Are there any issues with using shotcut notation on your application, or do you just prefer extra markup (albeit clearer)?

[djmothra]

i would have prefered to use the shorter method, but it just does not work!! (i tried changing < to &lt; etc, but to no avail...)

using the longer code, at least i know it will definately work (and it does), the code is done now, so won't need to really go back to it (apart from to make it look nicer! - but thats a different story!)

Many thanks for your help!!