The primary problem was that there was an ampersand in the jquiry reference. The XPage source has to be well-formed XMl. So in the source replace "&" with &
The following is the complete XPage source code that I was able to get working except for the play function. But I don't know jQuery.
<?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 -->
<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>
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 -->
<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>
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 -->
<h3>Third pane</h3>
<p style="font-weight:bold">
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
</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">
</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>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
// 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();
});
]]></xp:this.value>
</xp:scriptBlock>
</xp:view>