Viewpager not working when unitegallery is on same page - xpages

Question

I would like to use a viewPanel and unitegallery on the same page.
When they are on the same page, the pager from the viewPanel doesn't seem to work anymore.
Only the first page from the viewPanel is displayed.
It's impossible to go to the next items in the view.
My example code :
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom"
xmlns:xp_1="http://www.ibm.com/xsp/coreex"
pageIcon="/Logo-6%2C17-x-6%2C17.png">
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript'
src='../../demo.nsf/unitegallery/js/unitegallery.min.js'>
</script>
<link rel='stylesheet'
href='../../demo.nsf/unitegallery/css/unite-gallery.css'
type='text/css' />
<script type='text/javascript'
src='../../demo.nsf/unitegallery/themes/carousel/ug-theme-carousel.js'>
</script>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
tile_enable_textpanel:true,
tile_textpanel_title_text_align: "left",
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:this.data>
<xp:dominoView var="view4" viewName="country_extra_pictures"
keys="VBD200">
</xp:dominoView>
</xp:this.data>
<xp:br></xp:br>
<div id="gallery" style="display:none;">
<xp:repeat rows="100" var="pictureData" value="#{view4}" removeRepeat="true" id="additionalpictures">
<xp:image url="#{javascript:pictureData.getColumnValue('ThPicture');}"
alt="#{javascript:pictureData.getColumnValue('title')}">
<xp:this.attrs>
<xp:attr name="data-image" value="#{javascript:pictureData.getColumnValue('BigPicture')}">
</xp:attr>
</xp:this.attrs>
</xp:image>
</xp:repeat>
</div>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:viewPanel rows="11" id="viewPanel12" var="rowData" target="_self">
<xp:this.facets>
<xp:pager partialRefresh="true"
layout="Previous Separator Group Separator Next"
xp:key="headerPager" id="pager1">
<xp:this.rendered><![CDATA[#{javascript:getComponent("viewPanel12").getRowCount() > 10}]]></xp:this.rendered>
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view12" databaseName="product/spareparts.nsf" viewName="spareparts3"
keys="D200Current">
</xp:dominoView>
</xp:this.data>
<xp:viewColumn id="viewColumn18" columnName="spareProductPart">
<xp:this.facets>
<xp:viewColumnHeader
xp:key="header" id="viewColumnHeader18" sortable="false"
value="Product part">
</xp:viewColumnHeader>
</xp:this.facets>
</xp:viewColumn>
<xp:viewColumn id="viewColumn29" columnName="spareAsFrom">
<xp:this.facets>
<xp:viewColumnHeader
xp:key="header" id="viewColumnHeader29" value="As from">
</xp:viewColumnHeader>
</xp:this.facets>
</xp:viewColumn>
</xp:viewPanel>
</xp:view>

Answer 1

Just a guess as I don't know this plugin: it seems that the plugin changes the DOM of the view control so that the pager is not able to work with it anymore. This is a problem of several plugins that they change the original DOM significantly. You should exam the DOM (and compare it) with a debug tool from e.g. Chrome to watch the differences between the DOM without and with activated plugin.