立即注册 登录
彼岸网 返回首页

天香公主的个人空间 https://www.bian-wang.com/discuz/?10005 [收藏] [复制] [分享] [RSS] https://github.com/txgz999/discuz/wiki

日志

Discuz功能改进:在日志里点击看大图

热度 2已有 4910 次阅读2015-6-19 10:44 AM |个人分类:Discuz

网友小时候很迷茫问及如何在日志里加上论坛帖子看大图模式的那种效果,我看了看这功能主要是由三部分组成的:
1)显示大图的弹出窗口的HTML定义在文件 static/js/common_extra.js 里的 _zoom 函数里
2)弹出窗口的风格定义在文件 template/default/common/module.css 里的 mod_zoominner 部分
3)将图片加上点击后弹出窗口的属性定义在 source/function/function_attachment.php 的 parseattach 函数里(它调用了template/default/forum/discuzcode.htm 里的 attachinpost 函数,进而调用了source/function/function_attachment.php 里的 attachwidth 等函数)

要把这个功能加到日志里来,我们需要对2)中的  template/default/common/module.css 做些许修改: /** home::space,forum::viewthread,group::viewthread,forum::trade,portal::view,forum::forumdisplay **/ /* Name: mod_zoominner Level: Function Explain: 显示原始图片弹出层 Last Modify: Pony */ 其中的词 home::space 是新加的,这样使得在日志页里能用与图片弹出窗口有关的风格,即该段风格加到了日志页用的风格文件data/cache/style_1_home_space.css(或类似文件名)里。注意在做完上述修改后,要进管理中心去更新缓存才能生效。

其次我们要在日志页上做类似于3)的工作,代码可以加在日志页 template/default/home/space_blog_view.htm 的尾部,放在 <!--{template common/footer}--> 的前面: <script type="text/javascript"> var imgs = $('blog_article').getElementsByTagName('img'); // 选取日志正文里的所有图片 for(var i = 0; i < imgs.length; i++) { var img = imgs[i]; if (!img.src.match(/\/static\/image\/smiley\/comcom\/\d+.gif$/)) { // 忽略表情图片 img.setAttribute('style', 'cursor: pointer;'); // 给图片加上支持弹出窗口所需的属性 img.setAttribute('onclick', 'zoom(this, this.src, 0, 0, 0)'); // 如果图片是裹在超链里的,要让超链无法点击,不然它会影响图片点击 var pn = img.parentNode; if (pn.nodeName=='A') pn.setAttribute('onclick', 'return false'); } } </script>
下面是效果图:


这个功能适用于只允许用户在所见即所得编辑模式下发日志的网站。如果网站允许用户在日志里编辑代码的话,这样做可能会影响或干扰日志作者用代码添加的功能。


6月26日补充:

小时候很迷茫网友告知上面的代码没有产生论坛里有的在弹出窗口里看上一张下一张的效果,查了 common_extra.js 里对显示这个效果的要求后,现将上面的代码修改如下:
<script type="text/javascript"> var zoomgroup = {}; var aimgcount = []; aimgcount[1] = []; var imgs = $('blog_article').getElementsByTagName('img'); // 选取日志正文里的所有图片 for(var i = 0; i < imgs.length; i++) { var img = imgs[i]; if (!img.src.match(/\/static\/image\/smiley\/comcom\/\d+.gif$/)) { // 忽略表情图片 img.setAttribute('style', 'cursor: pointer;'); // 给图片加上支持弹出窗口所需的属性 img.setAttribute('onclick', 'zoom(this, this.src, 0, 0, 0)'); // 给图片加上支持弹出窗口里上下图转换所需的属性 img.setAttribute('zoomfile', img.src); img.setAttribute('id', 'aimg_' + i); zoomgroup['aimg_' + i] = 1; aimgcount[1].push(i); // 如果图片是裹在超链里的,要让超链无法点击,不然它会影响图片点击 var pn = img.parentNode; if (pn.nodeName=='A') pn.setAttribute('onclick', 'return false'); } } </script>
效果图:



发表评论 评论 (24 个评论)

回复 小时候很迷茫 2015-6-28 12:10 AM
天香公主: 是问怎么找到要改的内容?我先在一个论坛贴里加个几个图片,然后在firebug看了看论坛里上下张链接的属性,发现它用的ID是 zimg_next 等。在 Visual Studio 里搜 ...
是的,我就是不晓得怎么找要改的内容与关联文件
回复 小时候很迷茫 2015-6-28 12:04 AM
天香公主: 汗,这和你的年龄无关。

好象还是没太明白你的意思。日志的显示模板是 template/default/home/space_blog_view.htm,但你在那里修改后也许没在网页上立刻看到变 ...
我没有开发工具,我只会用EditPlus进行一些简单的修改,然后使用Adobe Dreamweaver CS6进行一些页面的编写与制作,php的话接触不深处于学习的阶段
回复 小时候很迷茫 2015-6-28 12:04 AM
天香公主: 汗,这和你的年龄无关。

好象还是没太明白你的意思。日志的显示模板是 template/default/home/space_blog_view.htm,但你在那里修改后也许没在网页上立刻看到变 ...
我没有开发工具,我只会用EditPlus进行一些简单的修改,然后使用Adobe Dreamweaver CS6进行一些页面的编写与制作,php的话接触不深处于学习的阶段
回复 小时候很迷茫 2015-6-27 11:59 PM
这个倒是没注意,我把日志的编辑器给修改掉了,去掉了表情还有其他一些功能,只留下了排版及其上传图片
回复 天香公主 2015-6-27 02:20 PM
小时候很迷茫: 是的,就是这种效果 ,虽然按照这个思路修改好了,可是还是不是很理解其中的原理,可以简单的告诉我修改的一些操作吗,在修改过程中又应该注意哪些东西 ...
我刚改了一句,把 aimgcount[1] = i; 改成了 aimgcount[1].push(i); 不然日志里如果有表情图的话会出错。
回复 天香公主 2015-6-27 01:07 PM
小时候很迷茫: 是的,就是这种效果 ,虽然按照这个思路修改好了,可是还是不是很理解其中的原理,可以简单的告诉我修改的一些操作吗,在修改过程中又应该注意哪些东西 ...
是问怎么找到要改的内容?我先在一个论坛贴里加个几个图片,然后在firebug看了看论坛里上下张链接的属性,发现它用的ID是 zimg_next 等。在 Visual Studio 里搜索发现这些 DOM 元素是在 common_extra.js 里加入的。在 debug 时查了查当运行 common_extra.js 里的相关代码时有关变量的值。然后在 space_blog_view.htm 自己的代码里也类似的给这些变量赋值。我在这 http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1073 贴了些图示
回复 天香公主 2015-6-27 01:07 PM
小时候很迷茫: 我年纪比较小的,属于90后,叫姐姐应该也没错撒    我说的控制文件就是指日志的内容模板,因为我想要将文字跟图片拆分开来,但是在删除过程中只能删除全部 ...
汗,这和你的年龄无关。

好象还是没太明白你的意思。日志的显示模板是 template/default/home/space_blog_view.htm,但你在那里修改后也许没在网页上立刻看到变化。要到管理中心里去更新缓存。

得用个开发工具,我不知你用哪个。我用的是 Visual Studio 2015 RC + PHP Tools for Visual Studio
回复 小时候很迷茫 2015-6-27 12:04 PM
天香公主: 哦,我把代码加在博文里了,你再看看
是的,就是这种效果 ,虽然按照这个思路修改好了,可是还是不是很理解其中的原理,可以简单的告诉我修改的一些操作吗,在修改过程中又应该注意哪些东西
回复 小时候很迷茫 2015-6-27 11:58 AM
天香公主:    你这称呼让我实在无法消受,都怪我网名起得不好。我的网友大多叫我天香,要不你也这样叫我吧?

不明白你说的'控制文件'是什么,请详述 ...
我年纪比较小的,属于90后,叫姐姐应该也没错撒   我说的控制文件就是指日志的内容模板,因为我想要将文字跟图片拆分开来,但是在删除过程中只能删除全部内容,然后也去寻找了这个模板文件,一直找不到,home文件夹里面与日志关联的模板基本都试过了,要想利用系统文件达到效果有点难,只能自己写代码将内容这个模块替换掉,可是自己写又老是出错,出错之后还不知道该如何调试
回复 天香公主 2015-6-26 07:26 AM
小时候很迷茫: 姐姐 找到控制文件的时候能不能告诉我一下    我想研究一些其它的效果,可是找来找去都找不到那个文件,内容如果删除也必须全部删除,对文字的限制什么的都 ...
   你这称呼让我实在无法消受,都怪我网名起得不好。我的网友大多叫我天香,要不你也这样叫我吧?

不明白你说的'控制文件'是什么,请详述
回复 天香公主 2015-6-26 07:22 AM
小时候很迷茫: 论坛有上一张下一张的效果,鼠标移到图片上就会显示到边边上。。我只能做到将内容幻灯效果显示;点击之后进行上下切换的控制没找到在哪。。我将日志修改的是论坛 ...
哦,我把代码加在博文里了,你再看看
回复 小时候很迷茫 2015-6-26 01:14 AM
天香公主: 你说的对,论坛里的确有这功能。给我点时间,我会想想看能不能在已有的代码基础上比较简单的用到日志里去
姐姐 找到控制文件的时候能不能告诉我一下   我想研究一些其它的效果,可是找来找去都找不到那个文件,内容如果删除也必须全部删除,对文字的限制什么的都做不了
回复 天香公主 2015-6-25 11:42 PM
小时候很迷茫: 论坛有上一张下一张的效果,鼠标移到图片上就会显示到边边上。。我只能做到将内容幻灯效果显示;点击之后进行上下切换的控制没找到在哪。。我将日志修改的是论坛 ...
你说的对,论坛里的确有这功能。给我点时间,我会想想看能不能在已有的代码基础上比较简单的用到日志里去
回复 小时候很迷茫 2015-6-25 11:03 PM
本来是想利用相册功能来做的,可是文字的描述太少了,所以就将重点放到了日志功能上面,,而论坛那块利用活动做一个类似时间轴的功能,以后长大了也能翻看翻看
回复 小时候很迷茫 2015-6-25 10:58 PM
论坛有上一张下一张的效果,鼠标移到图片上就会显示到边边上。。我只能做到将内容幻灯效果显示;点击之后进行上下切换的控制没找到在哪。。我将日志修改的是论坛里面的只看该作者旁边的只看大图功能,将日志限制文字的发布,做成一个图片的展示     是跟几个朋友一起玩,上传一些出去玩的照片,同时也准备用discuz这个系统做一个属于自己的个人博客
回复 小时候很迷茫 2015-6-25 10:58 PM
论坛有上一张下一张的效果,鼠标移到图片上就会显示到边边上。。我只能做到将内容幻灯效果显示;点击之后进行上下切换的控制没找到在哪。。我将日志修改的是论坛里面的只看该作者旁边的只看大图功能,将日志限制文字的发布,做成一个图片的展示     是跟几个朋友一起玩,上传一些出去玩的照片,同时也准备用discuz这个系统做一个属于自己的个人博客
回复 天香公主 2015-6-25 10:45 PM
小时候很迷茫: 点击放大之后只能看到一张图片,如果想要添加上下翻看该日志内所有图片的效果应该如何入手呢?
我试了下论坛里也没你要的这个功能吧,要加这个功能估计得改common_extra.js。说难也不难,我那段代码里已经找到了日志正文里所有的图片,把它们记在一个array里,然后当需要显示下一张时,从这个array里找到下一张图片,调用下类似于 img.click() 的代码就能显示下一张。说简单也不简单,要搞的很流畅也需要多次校验和修改。好象也没这必要吧,还不如就找个插件用用算了,网上有好多个jQuery image slider的插件。
回复 小时候很迷茫 2015-6-25 09:41 PM
点击放大之后只能看到一张图片,如果想要添加上下翻看该日志内所有图片的效果应该如何入手呢?
回复 小时候很迷茫 2015-6-25 03:55 AM
天香公主: 我原来以为这一个个风格文件是独立定义的,现在才知道都是源于module.css (除common开头的几个文件外)。集中管理按需分配这想法不错的 ...
这样是很不错,但是在修改过程中会很麻烦;难怪一般开发插件跟模板的他们都是自己重新写,借用的只是一些局部样式,不过discuz确又是最好学习的,像我这种零基础的也能进行搭建
回复 天香公主 2015-6-23 10:13 AM
小时候很迷茫: 看完之后有点思路,具体还待多实践,以前一直纠结于common_extra.js,导致一直不得要领,原来还需要在css中下点功夫 ...
我原来以为这一个个风格文件是独立定义的,现在才知道都是源于module.css (除common开头的几个文件外)。集中管理按需分配这想法不错的
12下一页

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 立即注册

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2026-8-12 07:33 PM , Processed in 0.041689 second(s), 19 queries.

返回顶部