Question

我想使用Unitegallery卡鲁塞尔和一些图片，他们的网址在视图中。我尝试了以下方法：

<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控制台中，我收到错误消息：＆＃34;未捕获错误：该项目不应为图像类型＆＃34;在右边unitegallery.min.js：4＆＃34;

重复播放，找到图片，但不显示并发出此错误。

当我用＆＃34替换重复时;硬编码＆＃34;图像引用一切似乎都有效....

修改

thisPicture实际上是图片的完整网址，例如：服务器/产品/ picture.nsf / O / UNID / $文件/ 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控制台中出现的错误的更多详细信息：＆＃34;未捕获错误：该项目不应是图像类型＆＃34;在右边unitegallery.min.js：4＆＃34;

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

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的区别时，我发现有一个双重的＆＃34; （好）和一个＆＃39; （坏）对于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>

您收到错误“该项目不应为图片类型”，因为unitegallery不喜欢<div>中的<span>和<div id="gallery"> ... </div>。必须只有<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，就像它们被XPage渲染一样。这就是嵌入html <div id="gallery"来定义Unitegallery旋转木马的地方的原因。由于它已经是客户端html，因此您可以使用$("#gallery").

直接在客户端代码中解决该问题

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

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

这适用于Unitegallery。

Unitegallery无法使用重复控制

1 个答案: