关于房产图片出现双图的问题解决办法

dima

关于房产图片出现双图的问题

使用dl dd dt 代替 table 可以解决

D:\Wamp\www\discuz\template\ezhw\category\house_view.htm

使用

1.        <div>
   
2.                                 <!--{loop $piclist $url}-->
   
3.                         <dl style="float:left;">
   
4.                        <dd style="width:170; background-image:url(static/image/zoom/pic_bg.jpg); margin-bottom:0px;"><a href="{$_G[setting][attachurl]}$url" title="{lang house_picreturn}"><img src="{$_G[setting][attachurl]}$url" width="150" height="100" border="0" alt="" id="$url" class="photo" /></a>
   
5.                                 <dt style="width:170; text-align:center;"><a href="{$_G[setting][attachurl]}$url" title="{lang house_picclick}">{lang house_picclick}</a></dt>
   
6.                                 </dd>
   
7.                         </dl>
   
8.                                 <!--{/loop}-->
   
9.                         </div>

复制代码

替换

1.      <table cellspacing="0" cellpadding="0" align="left" border="0" cellspace="0">
   
2.         <tbody>
   
3.         <tr>
   
4.           <td id="demo1" valign="top">
   
5.                   <table width="100%" height="116"  border="0" cellpadding="0" cellspacing="0">
   
6.             <tr>
   
7.                                 <!--{loop $piclist $url}-->
   
8.                                 <td width="171" background="static/image/zoom/pic_bg.jpg"><a href="{$_G[setting][attachurl]}$url" title="{lang house_picreturn}"><img src="{$_G[setting][attachurl]}$url" width="150" height="99" border="0" alt="" id="$url" class="photo" /></a></td>
   
9.                                 <!--{/loop}-->
   
10.             </tr>
    
11.             <tr>
    
12.                                 <!--{loop $piclist $url}-->
    
13.                                 <td width="171" style="text-align:center"><a href="{$_G[setting][attachurl]}$url" title="{lang house_picclick}">{lang house_picclick}</a></td>
    
14.                                 <!--{/loop}-->
    
15.             </tr>
    
16.           </table>
    
17.                   </td>
    
18.           <td id="demo2" valign="top"> </td>
    
19.                   </tr></tbody></table>

复制代码

管理员

感谢建议，我们会优化后加入下个版本的，再次感谢。
不过该代码在多图情况下是否依旧可以滚动呢？

dima

多图依然可以

管理员

dima 发表于 2011-8-19 01:00

                               
登录/注册后可看大图

多图依然可以

不是这个，我是指超过三张（四张、五张的情况下，默认代码是设置了滚动显示的，而这样该则会不行，另外动态放大在这里面也被去除了）

dima

管理员 发表于 2011-8-19 01:49

                               
登录/注册后可看大图

不是这个，我是指超过三张（四张、五张的情况下，默认代码是设置了滚动显示的，而这样该则会不行，另外动 ...

你是说多图自动换行和点击放大吧：实际效果如下






老代码在IE下不正常，新代码在IE 火狐 Google 下测试都正常。

dima

附上修正后的文件，供测试：
house_view.rar (3.8 KB, 下载次数: 4)

2011-8-19 12:09 上传

点击文件名下载附件

Loading...

确实有重复的问题

湖中沉

dima 发表于 2011-8-19 11:43

                               
登录/注册后可看大图

你是说多图自动换行和点击放大吧：实际效果如下

经测试，滚动效果丢失，如果不要滚动效果，原代码就可以不重复了。
不过仍然感谢楼主提供的思路和改进，欢迎继续交流，一起打造更好的模块

PS：管理员说的无法放大好像是因为你一楼的代码里面确实少了onload这部分

管理员

dima 发表于 2011-8-19 11:43

                               
登录/注册后可看大图

你是说多图自动换行和点击放大吧：实际效果如下

呵呵，不是换行，原来的设计是会自动滚动的（大于三张时），这样更改就会丢失滚动效果了，目前网上对图片无缝滚动效果基本上都是采取重复来实现的

dima

出现重复图片会被认定为BUG少了滚动则不然，总得有所取舍