公告:如果您的账号不能登录,可能是系统对您账号进行了保护,我们发现系统中存在着不安全密码,故对其重置,请您重新激活账号,对于给您造成的不便,敬请谅解!
论坛风格切换切换到宽版
  • 3066阅读
  • 2回复

dede与MagicZoom放大镜效果在内容页完美结合(原创) [复制链接]

上一主题 下一主题
离线gangzi0214
 

发帖
277
贡献值
234
威望值
48
技术分
0
织梦币
0
只看楼主 倒序阅读 使用道具 0 发表于: 2011-11-09


给大家发一个最近研究出来的MagicZoom放大镜效果和dede内容页完美结合的效果,能实现图片细节查看的效果。
原始的效果:http://www.leadto.com.cn/a/download/software/2011/1108/183.html
(不显示效果,多刷新一下,为了效果我放的大图片有些大,加载慢,实际应用中可不用放这么大的图)
这个效果是原始的,我们破解后,去掉了版权信息,当然还和dede结合啦。把破解后的js文件和css文件,以及前台调用代码,还有可自动安装的自定义模型代码一块打包了,大家到这个页面下载即可。
http://www.leadto.com.cn/a/download/software/2011/1108/183.html
RAR解密密码:LeadTo
文件名:MagicZoom
破解后的效果截图:

好废话少说,开始动手:
SPEP1:增加一个自定义模型:
核心——频道模型——内容模型管理——增加新模型
切记,在“列表附加字段”,增加上前台要调用的字段标签,我这里需要调用文章正文、产品缩略图、放大后图片、产品概要,字段依次为:
body,productspic1,productspic2,productsinnertxt
截图:




另外,两个图片的字段,再添加的时候了记得选择上“前台参数:挑勾”,“数据类型:图片(无格式)”。
截图:

STEP2:模板调用标签
在你的article或者自己增加的内容页模板上,调用标签。我的模板调用代码如下(你的根据你页面实际情况做适当调整,别忘记调用样式就行class="MagicZoom"):
<div><dl class="prd_mesg clearfix">
        <dt><a href="{dede:field.productspic2/}" title="" class="MagicZoom"><img src='{dede:field.productspic1/}' width="274px"; height="273px" /></a></dt>
        <dd>
          <h2>{dede:field.title/}</h2>
          {dede:field name='productsinnertxt'/}
        </dd>
      </dl>
      {dede:field.body/}</div>
STEP3:添加栏目
增加一个栏目,同时选择刚刚增加的自定义模型,如下图。之后,在“高级选项”下选定刚刚添加标签调用的内容页模板。

STEP4:添加文档
提交后,点击内容,添加一篇文档,那个“产品内页缩略图”就是我设定的小图,内页大图就是放大后的图。备注:这个js效果非常好,因为大图小图是分开的,这样的好处一个是有利于图像显示不失真,一个是图片加载比较合理。如下图:

这两个图片,大图和小图最好是同一个宽高比例的,这样就会实现图片细节放大查看的效果了。

原始的效果:http://www.leadto.com.cn/a/download/software/2011/1108/183.html
(不显示效果,多刷新一下,为了效果我放的大图片有些大,加载慢,实际应用中可不用放这么大的图)
这个效果是原始的,我们破解后,去掉了版权信息,当然还和dede结合啦。把破解后的js文件和css文件,以及前台调用代码,还有可自动安装的自定义模型代码一块打包了,大家到这个页面下载即可。
http://www.leadto.com.cn/a/download/software/2011/1108/183.html
RAR解密密码:LeadTo
文件名:MagicZoom

如有疑问,可以随时到我们网站咨询在线QQ(473587358) www.leadto.com.cn
本文地址(支持原创,转载请注明出处):http://www.leadto.com.cn/a/download/others/2011/1108/191.html
离线loveqzi

发帖
1060
贡献值
1555
威望值
130
技术分
0
织梦币
0
只看该作者 1 发表于: 2011-11-16
似乎没有必要这么复杂
 
织梦站长学院 www.dedezhan.com
离线rcookie

发帖
519
贡献值
407
威望值
51
技术分
0
织梦币
0
只看该作者 2 发表于: 2011-11-20
呵呵  很详细的说明啊..
 
快速回复
限100 字节
发布任务,二次开发;付费求助:http://bbs.dedecms.com/t68
 
上一个 下一个