I would like to use Unitegallery carrousel with some pictures who's urls are in a view. I tried the following :
<xp:this.resources>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
</xp:this.resources>
<script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/carousel/ug-theme-carousel.js'></script>
<xp:this.data>
<xp:dominoView var="view4" databaseName="pictures.nsf"
viewName="pictures3" keys="demo">
</xp:dominoView>
</xp:this.data>
<xp:scriptBlock id="scriptBlock2">
<xp:this.value><![CDATA[
$(document).ready(
function() {
x$("#{id:gallery}").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
]]></xp:this.value>
</xp:scriptBlock>
<xp:panel>
<div id="gallery" style="display:none;">
<xp:repeat id="repeat6" rows="30" var="pictureData" value="#{view4}">
<xp:text escape="false" id="computedField11">
<xp:this.value><![CDATA[#{javascript:var thisPicture= pictureData.getColumnValue("bigPicture");
dezeAfbeeldingen ="<img src='"+thisPicture+"'data-image='"+thisPicture+"'style='height: 60px;width: 60px;'></img>";
return dezeAfbeeldingen;}]]></xp:this.value>
</xp:text>
</xp:repeat>
</div>
</xp:panel>
The result : nothing is displayed. In Google chrome console I get an error : "Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
The repeat is run , the pictures are found , but don't display and give this error.
When I replace the repeat with "hardcoded " image references everything seems to work....
EDIT
thisPicture is in fact the complete url of the picture so for example : server/product/picture.nsf/O/unid/$File/picturename.jpg
HTML output :
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/xsp/.ibmxspres/.mini/css/2Eabootstrap/xsptheme/xsp.css&2Eabootstrap/bootstrap311/css/bootstrap.min.css&@Da&2Eabootstrap/xpages300.css.css">
<script type="text/javascript">var dojoConfig = {locale: 'nl-nl'};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.9.4/dojo/dojo.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.nl-nl/@Iq.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/bootstrap311/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/xsp/.ibmxspres/.extlib/bootstrap/xpages300.js"></script>
<link rel="stylesheet" type="text/css" href="/web/web.nsf/bootstrap.min.css">
<script type="text/javascript" src="/web/web.nsf/JQueryXSnippet"></script>
</head>
<body class="xsp tundra">
<form id="view:_id1" method="post" action="/web/web.nsf/test_unite_gallery2.xsp" enctype="multipart/form-data">
<script src="unitegallery/js/unitegallery.min.js" type="text/javascript"></script><link href="unitegallery/css/unite-gallery.css" rel="stylesheet" type="text/css"><script src="unitegallery/themes/carousel/ug-theme-carousel.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(
function() {
x$("gallery").unitegallery({
gallery_theme: "carousel",
tile_width: 60, //tile width
tile_height: 60, //tile height
});
}
);
</script>
<div id="gallery" style="display:none;"><div id="view:_id1:repeat6">
<span id="view:_id1:repeat6:0:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename1.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename1.jpg'style='height: 60px;width: 60px;'></img>
</span>
<span id="view:_id1:repeat6:1:computedField11"><img src='server/product/picture.nsf/O/unid/$File/picturename2.jpg'data-image='server/product/picture.nsf/O/unid/$File/picturename2.jpg'style='height: 60px;width: 60px;'></img>
</span>
etc for other pictures
</div>
<input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!e4h2ba0vbj!">
<input type="hidden" name="$$xspsubmitid">
<input type="hidden" name="$$xspexecid">
<input type="hidden" name="$$xspsubmitvalue">
<input type="hidden" name="$$xspsubmitscroll">
<input type="hidden" name="view:_id1" value="view:_id1"></form>
</body>
</html>
EDIT2
More details about the error I get in chrome console : "Uncaught Error: The item should not be image type " and at the right side unitegallery.min.js:4"
when I click on the arrow I get more details :
fillItemsArray @ unitegallery.min.js:4
runGallery @ unitegallery.min.js:4
UniteGalleryMain.run @ unitegallery.min.js:4
jQuery.fn.unitegallery @ unitegallery.min.js:9
(anonymous function) @ test_unite_gallery2.xsp:23
n.Callbacks.j @ jquery-1.11.0.min.js:2
n.Callbacks.k.fireWith @ jquery-1.11.0.min.js:2
n.extend.ready @ jquery-1.11.0.min.js:2
K @ jquery-1.11.0.min.js:2
Under resources there's a red 1 behind unitegallery.min.js , and gives the same error message for it (The item should not be image type).
EDIT3
When I have a look at the difference of the html generated by the repeat or the hard coded picture references I see that there's a double " (good) and a ' (bad) for the img and src tags. How can I change that ?
This should work:
You get the error "The item should not be image type" because unitegallery doesn't like the
<div>s and<span>s within<div id="gallery"> ... </div>. There have to be only<img>s.As you showed in your question your rendered html looks like this
You get rid of repeat-div with repeat's attribute
removeRepeat="true".You can avoid computed field's span with
<xp:image ... />. Set the additional attribute "data-image" as an additional attribute.Unitegallery doesn't like ids with ":" in it like they get rendered by XPages. That's why embed html
<div id="gallery"to define the place for Unitegallery carrousel. As it's already client side html you can address it direct in your client side code with$("#gallery").The code above renders the gallery-div with nested repeat to just
and this works well for Unitegallery.