Displaying a jquery image slider using xslt

566

November 23, 2016, at 8:31 PM

I have two xml pages, one of them(Slide.xml) contains information about images of the slider, i want to display these images as a jquery slider using xslt. All i have managed to do is display the slider, but the images won't display. Please help me.
Slide.xml:

<?xml version="1.0" encoding="UTF-8"?>
<slide>
    <image>nemo.jpg</image>
    <image>up.jpg</image>
    <image>walle.jpg</image>
</slide>

index.xml:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="Pub.xsl"?>
<liste>
    <page name="Pub.xml" ></page>
    <page name="Slide.xml" ></page>
</liste>

xslt file:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:xs="http://www.w3.org/2001/XMLSchema" exclude-result-prefixes="xs" version="2.0">
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>TEST</title>
                <!-- slider -->
                <link rel="stylesheet" href="Nivo-Slider/nivo-slider.css" type="text/css"/>
                <link rel="stylesheet" href="Nivo-Slider/themes/default/default.css"
                    type="text/css"/>
                <script src="Nivo-Slider/jquery-1.11.3.js" type="text/javascript"/>
                <script src="Nivo-Slider/jquery.nivo.slider.pack.js" type="text/javascript"/>
                <!--slider-->
                <link rel="stylesheet" href="main.css" type="text/css"/>
            </head>
            <body>
                <div class="content">
                    <div id="header">
                        <h1>Hello</h1>
                        <div id="nav">
                            <ul>
                                <li>
                                    <a href="#">Accueil</a>
                                </li>
                                <li>
                                    <a href="#">Contact</a>
                                </li>
                                <li>
                                    <a href="#">A propos</a>
                                </li>
                            </ul>
                        </div>
                        <div style="clear: both"> </div>
                        <div id="searchBox">
                            <form action="#">
                                <input type="text" class="box"/>
                                <input type="submit" class="button" value="Rechercher"/>
                            </form>
                        </div>
                    </div>
                    <div class="slider-wrapper theme-default">
                        <div id="slider" class="nivoSlider">
                            <xsl:for-each select="document('Slide.xml')/slide/image">
                                <img src="{image}" alt="aa"/>
                            </xsl:for-each>
                        </div>
                    </div>
                    <div id="htmlcaption" class="nivo-html-caption">
                        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>
                    <script type="text/javascript">
                    $(window).load(function() {
                    $('#slider').nivoSlider();
                    });
                </script>
                </div>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Answer 1

Inside the for-each you simply need to use <img src="{.}" alt="aa"/> to output the string value of the context node. Your attempt <img src="{image}" alt="aa"/> would look for an image child of the context node.