attachment的图片在弹出窗口中用carousel展示的问题

hbyczg

jishuang 发表于 2016-11-30 17:56
看看样式上是不是有display:none的
或者宽度和高度为0了

没有，如果有的话单张图片和第一次的多张图片应都显示不出来。现在是显示一次多张图片后不管是单张还是多张都显示不出来

jishuang

1.carousel组件的定义

1.             <div component="$UI/system/components/bootstrap/carousel/carousel"
   
2.               class="x-carousel" xid="carousel1" auto="true">
   
3.               <ol class="carousel-indicators" xid="ol1"/>  
   
4.               <div class="x-contents carousel-inner" role="listbox" component="$UI/system/components/justep/contents/contents"
   
5.                 active="0" slidable="true" wrap="true" swipe="true" routable="false"
   
6.                 xid="contents1" style="height:300px;"></div>
   
7.             </div>

复制代码

2.数据处理

1.         Model.prototype.wReceiverReceive = function(event) {
   
2.                 var data = this.comp("bizData1");
   
3.                 data.setFilter("filter1", data.idColumn + "='" + event.data.row.getID() + "'");
   
4.                 data.refreshData();
   
5.                 var carousel = this.comp("carousel1");
   
6.                 var sphoto = data.getValue("fFJ2");
   
7.                 if (sphoto != null && sphoto != "" && sphoto != "[]") {
   
8.                         var imageJson = eval("(" + sphoto + ")");
   
9.                         if (imageJson.length > 0) {
   
10.                                 for (var i = 0; i < imageJson.length; i++) {
    
11.                                         var fileID = imageJson[i]["fileID"];
    
12.                                         var docPath = imageJson[i]["docPath"];
    
13.                                         var url = DocUtils.InnerUtils.getdocServerAction({
    
14.                                                 "docPath" : docPath,
    
15.                                                 urlPattern : "/repository/file/view/" + fileID + "/last/content",
    
16.                                                 isFormAction : false,
    
17.                                                 context : this.getContext()
    
18.                                         });
    
19.                                         carousel.add('<img src="' + url + '"/>');
    
20.                                 }
    
21.                         }
    
22.                 }
    
23.         };

复制代码

测试没问题，每次打开都会显示多张这条数据的图片

windowDialog的forceRefreshOnOpen设置的是true

hbyczg

jishuang 发表于 2016-12-1 09:49
1.carousel组件的定义

2.数据处理

谢谢，就是windowDialog的forceRefreshOnOpen设置的问题，把windowDialog的forceRefreshOnOpen设置的为true，就好了。另外问一下想在carousel中展现的图片小于当前窗口时按原始大小居中显示，当其大于当前窗口时以保持纵横比撑满窗口显示，窗口不出现滚动条。应怎么设置

jishuang

看标准的div中怎么用样式控制，可以自己定义样式，在image上设置样式

hbyczg

jishuang 发表于 2016-12-1 11:50
看标准的div中怎么用样式控制，可以自己定义样式，在image上设置样式

image-wall小图会拉大，并且不会上下居中，我要在carousel中展现的图片小于当前窗口时按原始大小居中显示，当其大于当前窗口时以保持纵横比撑满窗口显示，窗口不出现滚动条，经过不断尝试仍不得效果，还望老师提供一下具体的代码。

jishuang

没有具体的代码，就是html标准样式控制，自己到网上查找

hbyczg

jishuang 发表于 2016-12-1 16:50
没有具体的代码，就是html标准样式控制，自己到网上查找

carousel.add('<div class="zxx_align_box_5 fix"> <a href="#zhangxinxu"> <img src="' + url + '"class=" tb-img1" />  </a> </div>');
tb-img1{ width:auto; height:auto; max-width:100%; max-height:100%;}

.x-contents-content {
         display: table-cell;
        vertical-align:middle;
        text-align:center;
       
}

.tb-img1{ width:auto; height:auto; max-width:100%; max-height:100%;}

.x-contents-content {
         display: table-cell;
        vertical-align:middle;
        text-align:center;
       
}

.zxx_align_box_5 a{display:inline-block;  font-size:200px; text-align:center; vertical-align:middle;}
.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

这个也只能实现水平居中，下下居中没起做用，请问怎么改

jishuang

1. .carousel-inner {
   
2.         position: absolute;
   
3.         bottom: 10px;
   
4.         left: 50%;
   
5.         width: 60%;
   
6.         margin-left: -30%;
   
7.         padding-left: 0;
   
8.         list-style: none;
   
9.         text-align: center
   
10. }

复制代码

hbyczg

jishuang 发表于 2016-12-2 09:34

请问是我前面的样式都不要了，就只用这一个吗？还是要配合前面的那些样式一起用？好像都没什么变化

jishuang

只需要我发的