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.

Rent Charter Buses Company
READ ALSO
How to fade out div when user is inactive

How to fade out div when user is inactive

this should be easy but I just can't get it to work as it should. .

359
scroll down process trail line not working properly when screen size changes, especially for mobile

scroll down process trail line not working properly when screen size changes, especially for mobile

I am making a process trail line animation , on scroll down for showing steps (tutorial) for my website. .

281
Check if the page was reload

Check if the page was reload

I have a problem with my site. So, I have a div with adsense like this :.

454
Hiding only div content using javascript not the picture and border of the div [closed]

Hiding only div content using javascript not the picture and border of the div [closed]

I want to hide only the div content not the div border and image and width of the div. The code is below:.

314