discuz x3 diy幻灯片制作教程

昨天弄了一下午,由于是第一次,所以很慢,大概从6点弄到7点,然后又从9点弄到10点,之后又调试了1小时,整整3个小时,虽然有点分开,不过最终还是完成了。偶从2月27日开始下载的 2.5rc,之前从来米使用过dz产品,差不多一直以来,都希望自己能够制作模板还有改点功能,看到别人的幻灯漂亮,自己心里羡慕,看到优秀的模板,怪自己不会制作也米钱买下来,所以从5月份那时候起,偶心里就下了决心,既然无意中选择了discuz,那么就一路走下去,只要这个系统还是开源的,偶都会坚持用的,今天秀一下自己的diy幻灯片,不需要插件,因为偶觉得插件不好,发上来,大家先看看,很快还是这个帖子,发个制作教程。 网址:html6game.com 上图:默认幻灯 下图:diy幻灯

001

不过也遇到问题,就是像这样 960_500px 幻灯片,由于图片太大了,前台根本更新不出来,并且高宽也不同,因为帖子那些图片大大小小的,所以图片只能从前台上传,另外还固定了数据。所以论坛文章更新之后,这些图片是不动的,如果要更新,也只能半手动处理下图片尺寸和填写标题{title}摘要{summary},呵呵。

今天有时间,来完善这个教程,下面开始

网站后台:

002

003

004

 

首先在网站后台,门户 – 模块模板 – 添加 帖子模块 模板名称:[DIY]幻灯片,然后代码里面复制下列代码

 

网站前台:

005

打开网站后,选择高级模式,然后 添加个 100%框架(记得设置样式为‘无边框且无边距’,标题也去掉),模块 – 帖子模块(记得设置样式为‘无边框且无边距’,标题也去掉),模块标识:slider 模块分类:帖子模块 数据来源:高级自定义 只接受推送数据 打上勾,显示条数:17 显示样式:[DIY]幻灯片 缩略图宽度:960 缩略图高度:500 链接打开方式:新链接打开,这些都写了之后,就点 数据 – 添加 – 显示位置:1 帖子URL:/thread-633-1-1.html 帖子标题:40个最好的iPhone应用程序网站 附件图片:上传 001.jpg 帖子内容:iPhone应用程序比以往任何时候都更热。那么这些应用程序中脱颖而出,并得到注意吗? 然后点确定。

006

007

008

009

 

一共添加 17条数据,注意 显示位置 ID 其实可以直接选择帖子的栏目或文章栏目,但那样获取的图片尺寸刷不到 960_500px这样大,所以这里只能半手动,这个幻灯片是随便找的一个,之前也弄成了非常小的尺寸,感觉不够大气,才改成 960的全屏尺寸,你可以照这个方法,自己找其它的幻灯片,flash javascript幻灯片都可以,只要把幻灯页面代码里面的字段都换成 diy 字段就行,比方,你的幻灯片是静态的代码,肯定有 html文件,打开它,将全部代码里面的 图片{pic} 图片宽度{picwidth} 图片高度{picheight} 链接{url} 内容{summary}和摘要{summary}都替换原来的静态部分,但有的幻灯片非常的复杂,比方偶这种,那就要具体修改,幻灯的css样式,也要修改成网站适合的,其实 discuz X2.5产品的模板制作也不是太难,就是要掌握它的一些字段使用,另外你至少要明白基本的js或jquery用法,那么制作模板也挺容易的,它本身前台的 diy功能相当的强大,希望这个教程能够帮助你建立一个你喜欢的网站幻灯片,或者首页N格之类的滑块效果,它们原理上都是一样的。由于偶也是第一次弄diy幻灯,写得不好,还请大虾多多指点。

相关的一些附件
网盘下载:http://pan.baidu.com/share/link?shareid=80217&uk=2535789224
添加的图片和数据:将 js幻灯片(html6game_js_slider) 上传至你网站的 /images/js/slider/

演示网址:请回到本帖子最上方 ↑