Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using Javacript onclick event to display xsl:value-of select

Status
Not open for further replies.

Dozzer81

Technical User
Joined
Jun 29, 2007
Messages
14
Location
GB
Ok this is what I'm trying to do, when viewing the artists images in a small thumbnail gallery when you click on one of the images you see a larger version of that image(Which I have already achieved) and the title and description of that image is also to be displayed along with the larger image (this is the problem I'm facing). I'm guessing that a onclick event will be needed within the following tag:

<a href="{img}" rel="enlargeimage::click" rev="bigimg">

in my xslt but this is as far as my knowledge goes with xml and xslt. I would appreciate any help with this as this project has become a living nightmare and I just want to finish it up a soon as possible.




****** Here is my XML ******

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.

</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/2.jpg</img>
<title>Title 10</title>
<description>Watercolor on canvas
500 x 1000</description>
</art>

</artist>


******* Here is my XSLT *******

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="motiongallery.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 id="motioncontainer" style="position:relative;overflow:hidden;">
                <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

                <nobr id="trueContainer">
                    <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>
                </nobr></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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top