Unitegallery 不适用于重复控制

Question

我想使用 Unitegallery carrousel 来显示 url 中的一些图片。我尝试了以下方法：

<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>

结果：没有显示任何内容。在 Google chrome 控制台中我得到一个错误："Uncaught Error: The item should not be image type " 并且在右侧 unitegallery.min.js:4"

重复是运行，图片找到了，但是不显示报这个错

当我用 "hardcoded " 图像引用替换重复时，一切似乎都有效....

编辑

thisPicture 实际上是完整的 url 图片，例如： server/product/picture.nsf/O/unid/$File/picturename.jpg

HTML 输出：

<!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&amp;2Eabootstrap/bootstrap311/css/bootstrap.min.css&amp;@Da&amp;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>

其他图片等

</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

有关我在 chrome 控制台中遇到的错误的更多详细信息： "Uncaught Error: The item should not be image type " 和右侧 unitegallery.min.js:4"

当我单击箭头时，我会获得更多详细信息：

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

资源下unitegallery.min.js后面有一个红色的1，给出同样的错误信息（该项目不应该是图像类型）。

EDIT3

当我查看由重复或硬编码图片引用生成的 html 的区别时，我发现 img 和src 标签。我该如何更改它？

Answer 1

这应该有效：

    <xp:scriptBlock id="scriptBlock2">
        <xp:this.value><![CDATA[
$(document).ready(
function() {
$("#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 rows="100" var="pictureData"  value="#{view4}" removeRepeat="true">
                <xp:image url="#{javascript:pictureData.getColumnValue("bigPicture")}">
                    <xp:this.attrs>
                        <xp:attr name="data-image" 
                            value="#{javascript:pictureData.getColumnValue("bigPicture")}">
                        </xp:attr>
                    </xp:this.attrs>
                </xp:image>
            </xp:repeat>
        </div>
    </xp:panel>

您收到错误 "The item should not be image type"，因为 unitegallery 不喜欢 <div id="gallery"> ... </div> 中的 <div> 和 <span>。必须只有 <img>s.

正如您在问题中所展示的那样，您呈现的 html 看起来像这样

<div id="gallery" style="display:none;">
    <div id="view:_id1:repeat6">
        <span id="view:_id1:repeat6:0:computedField11">
            <img src='server/product/.../picturename1.jpg' 
                 data-image='server/product/.../picturename1.jpg'>
            </img>
        </span>
        ...
    </div>
</div>

你用 repeat 的属性 removeRepeat="true".

摆脱了 repeat-div

您可以使用 <xp:image ... /> 避免计算字段的跨度。将附加属性 "data-image" 设置为附加属性。

Unitegallery 不喜欢其中带有“:”的 ID，就像它们是由 XPages 渲染的一样。这就是为什么嵌入 html <div id="gallery" 来定义 Unitegallery carrousel 的位置。因为它已经是客户端 html 你可以直接在你的客户端代码中使用 $("#gallery").

来解决它

上面的代码将带有嵌套重复的图库-div 呈现为

<div id="gallery" style="display:none;">
     <img src='server/product/.../picturename1.jpg' 
          data-image='server/product/.../picturename1.jpg'>
     </img>
     ...
</div>

这对 Unitegallery 很有效。

Unitegallery 不适用于重复控制

Unitegallery not working with repeat control

repeat

xpages