论坛 › 管理版 › 关于论坛图片缩放的问题，我来提一些意见！

kodo 发表于 2014-5-30 22:05

关于论坛图片缩放的问题，我来提一些意见！

主要针对图片较多的漫画区https://bbs.yamibo.com/forum-30-1.html
其它区可能也需要解决这个问题。

目前论坛的图片缩放有点小问题。

现在是设定缩放最大宽度768，但这只适合窄屏样式，不适合宽屏样式，而且帖子宽度的像素跟每个人的显示器有关，一律定768像素有些不妥。

建议改为按帖子宽度自适应缩放。

首先把后台的界面设置——帖子内容页，里面的帖内图片最大宽度改为6000

然后找
\static\js\common.js
将
        } else {
                fixw = typeof imagemaxwidth == 'undefined' ? '600' : imagemaxwidth;
                if(zw > fixw) {
                        zw = fixw;
                        zh = zw / zr;
                        obj.style.cursor = 'pointer';
                        if(!obj.onclick) {
                                obj.onclick = function() {
                                        zoom(obj, obj.src);
                                };
                        }
                }
        }
替换为
        } else {
                fixw = typeof imagemaxwidth == 'undefined' ? '600' : imagemaxwidth;
                parw = obj.parentElement.offsetWidth;
                minw = fixw > parw ? parw : fixw;
                if(zw > minw) {
                        zw = minw;
                        zh = zw / zr;
                        obj.style.cursor = 'pointer';
                        if(!obj.onclick) {
                                obj.onclick = function() {
                                        zoom(obj, obj.src);
                                };
                        }
                }
        }

siyeclover 发表于 2014-5-30 23:05

我怎么记得之前我改过宽度了？
今天不改了，等我明天外边玩回来再说。

kodo 发表于 2014-5-31 10:23

siyeclover 发表于 2014-5-30 23:05 static/image/common/back.gif
我怎么记得之前我改过宽度了？
今天不改了，等我明天外边玩回来再说。

昨天忘了一点，主楼那个通过改JS函数来缩略图片的方法，仅限于外链图片（图床不是本站），本站的附件图不是靠JS缩略的，要实现自适应缩放，还得另外改。

嗯，附件图这边要改三个地方：
1、\source\function\function_attachment.php
将
function attachwidth($width) {
        global $_G;
        if($_G['setting']['imagemaxwidth'] && $width) {
                return 'class="zoom" onclick="zoom(this, this.src, 0, 0, '.($_G['setting']['showexif'] ? 1 : 0).')" width="'.($width > $_G['setting']['imagemaxwidth'] ? $_G['setting']['imagemaxwidth'] : $width).'"';
        } else {
                return 'thumbImg="1"';
        }
}
替换为
function attachwidth($width, $maxw = 0) {
        global $_G;
        if($maxw && $_G['setting']['imagemaxwidth'] && $width){
                $minw = $width > $_G['setting']['imagemaxwidth'] ? $_G['setting']['imagemaxwidth'] : $width;
                $minw = $maxw > $minw ? $minw : $maxw;
                return 'class="zoom" onclick="zoom(this, this.src, 0, 0, '.($_G['setting']['showexif'] ? 1 : 0).')" width="'.$minw.'"';
        } elseif($_G['setting']['imagemaxwidth'] && $width) {
                return 'class="zoom" onclick="zoom(this, this.src, 0, 0, '.($_G['setting']['showexif'] ? 1 : 0).')" width="'.($width > $_G['setting']['imagemaxwidth'] ? $_G['setting']['imagemaxwidth'] : $width).'"';
        } else {
                return 'thumbImg="1"';
        }
}

2、\template\default\forum\viewthread.htm
将
                        <td class="plc ptm pbn">
                                <!--{if !IS_ROBOT}-->
替换为
                        <td class="plc ptm pbn" id="maxwidth">
                        <script type="text/javascript">
                        function setcookie2(name, value, expires) {
                                var curcookie = name + "=" + encodeURI(value)
                                +((expires) ? ";expires=" + expires.toGMTString() : "");
                                document.cookie = curcookie;
                        }
                        function savecookie2(name, value) {
                                var now = new Date();
                                now.setDate( now.getDate() + 180);
                                setcookie2(name, value, now);
                                window.location.href=window.location.href;
                        }
                        function readcookie2(){
                                var widthvalue=0;
                                var allcookies=document.cookie;
                                var pos=allcookies.indexOf("maxw=");
                                if(pos!=-1) widthvalue=allcookies.substring(pos).split(";").split("=");
                                return widthvalue;
                        }
                        var maxwidth = document.getElementById("maxwidth").offsetWidth - 40;
                        lastwidth = readcookie2();
                        if(lastwidth == 0 || lastwidth != maxwidth) savecookie2("maxw", maxwidth);
                        </script>
                                <!--{if !IS_ROBOT}-->

3、\template\default\forum\discuzcode.htm
将所有的
$widthcode = attachwidth($attach['width']);
（共3个）
替换为
$widthcode = attachwidth($attach['width'],$_COOKIE['maxw']);

ZaneJoyce 发表于 2014-5-31 12:08

虽然看到一大串字符吓到不行。。。但还是感谢楼主您的方法了。

kodo 发表于 2014-5-31 12:21

siyeclover 发表于 2014-5-30 23:05 static/image/common/back.gif
我怎么记得之前我改过宽度了？
今天不改了，等我明天外边玩回来再说。

附件图那边，还有一个地方（style部分）需要改：
\template\default\common\header.htm
将
<body id="nv_{$_G}" class
替换为
<body id="nv_{$_G}" style="overflow-y: scroll" class

siyeclover 发表于 2014-6-22 19:20

刚才我试着修改了一下。
发现修改\template\default\forum\viewthread.htm之后，帖子就无法显示了。
是不是在复制黏贴过程中出现了什么问题？还是别的原因呢？

另外，对于common.js的修改，我看到你新旧代码的宽度都是600，是笔误还是本来就是这样？

另外，因为百合会使用了定制模板，所以我修改的是定制模板的viewthread.htm，而不是默认模板的。

紫結 发表于 2014-6-23 00:32

siyeclover 发表于 2014-6-22 19:20 static/image/common/back.gif
刚才我试着修改了一下。
发现修改\template\default\forum\viewthread.htm之后，帖子就无法显示了。
是不 ...

发帖，评分，附件都用不了。

siyeclover 发表于 2014-6-23 01:17

测试图片附件

查看完整版本: 关于论坛图片缩放的问题，我来提一些意见！