Thank's for your answer Paul. I'ts not working yet but I think I'am close.
The Xpage doesn't save correctly, the only problem is the code where I put the reference to the js file. I made the line bold in the code below.
The error is: The reference to entity "debug" must end with the";" delimiter
I tried serveral things like putting a ";" delimiter in it but that doesn't work.
If I remove the part
?select=full&debug=true from the line of code. The Xpages saves without errors, but the Xpage does't run correctly.
Do you know what is wrong???
My code looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet
href="http://static.flowplayer.org/tools/css/standalone.css">
</xp:styleSheet>
<xp:styleSheet
href="http://static.flowplayer.org/tools/css/tabs-slideshow.css">
</xp:styleSheet>
</xp:this.resources>
<xp:scriptBlock id="scriptBlock1" src="http://flowplayer.org/tools/download/combine/1.2.3/jquery.tools.min.js?select=full&debug=true"></xp:scriptBlock> <!-- "previous slide" button -->
<a class="backward">prev</a>
<!-- container for the slides -->
<div class="images">
<!-- first slide -->
<div>
<h3>First pane</h3>
<img
src="http://static.flowplayer.org/img/title/screens.png"
alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
<p style="font-weight:bold">
Aenean nec imperdiet ligula. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur
ridiculus mus.
</p>
<p>
Suspendisse potenti. Sed elementum risus eleifend massa
vestibulum consectetur. Duis massa augue, aliquam eget
fringilla vel, aliquam vitae arcu. Nam sed magna mi.
Praesent odio neque, dapibus sit amet suscipit at,
tempus sed nibh. Aliquam sagittis ligula in ligula
faucibus cursus. Quisque vulputate pellentesque
facilisis.
</p>
</div>
<!-- second slide -->
<div>
<h3>Second pane</h3>
<img src="http://static.flowplayer.org/img/title/eye192.png"
alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
<p style="font-weight:bold">
Consectetur adipiscing elit. Praesent bibendum eros ac
nulla. Integer vel lacus ac neque viverra.
</p>
<p>
Vivamus euismod euismod sagittis. Etiam cursus neque non
lectus mattis cursus et a libero. Vivamus condimentum
hendrerit metus, a sollicitudin magna vulputate eu.
Donec sed tincidunt lectus. Donec tellus lectus,
fermentum sit amet porta non, rhoncus ac mi. Quisque
placerat auctor justo, a egestas urna tincidunt
eleifend.
</p>
</div>
<!-- third slide -->
<div>
<h3>Third pane</h3>
<p style="font-weight:bold">
Non lectus lacinia egestas. Nulla hendrerit, felis quis
elementum viverra, purus felis egestas magna.
</p>
<p>
Aenean elit lorem, pretium vitae dictum in, fermentum
consequat dolor. Proin consectetur sollicitudin tellus,
non elementum turpis pharetra non. Sed quis tellus quam.
</p>
</div>
</div>
<!-- "next slide" button -->
<a class="forward">next</a>
<!-- the tabs -->
<div class="slidetabs">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div
style="clear:both;margin:30px 0;text-align:center;padding-right:40px">
<button onClick='$(".slidetabs").data("slideshow").play();'>
Play
</button>
<button onClick='$(".slidetabs").data("slideshow").stop();'>
Stop
</button>
</div>
<script language="JavaScript">
// What is $(document).ready ? See:
http://flowplayer.org/tools/documentation/basics.html#document_ready
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect effect: 'fade', fadeOutSpeed:
"slow",
// start from the beginning after the last tab rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow(); });
</script>
</xp:view>