|
主题:★★2009最后一勃!图片当页放大JS教程★★★适用于企业站产品展示★★图片站图片预览效果★★兼容IE6以上以及其他已知浏览器★★ [收藏主题] | 转到: |
在这里首先感谢蓝色理想lifeseato的JS教程。是他的教程让我受到启发。教程地址:http://bbs.blueidea.com/thread-2959517-1-1.html
本人结合蓝色理想lifeseato教程,配合科讯CMS6.0最新版本出此教程。科讯CMS5.x以及更老版本由于标签的实现方式不一样,无法实现这个效果。
上图预览:(点缩略小图,在当前页面弹出一个层,展示大图。)
首先说一下浏览器兼容状况:
兼容IE6/7/8、火狐、谷歌、苹果、OPERA等浏览器。但在IE系列浏览器中的表现方式与其他浏览器略有不同,但不影响正常使用。
JS包下载: 以下内容只有回复后才可以浏览,请先登录!
下载:script.rarJS压缩包到本地,解压得到script文件夹,放到网站的根目录。
在网页模板的HEAD区域插入以下调用JS代码:
<script type="text/javascript" src="/script/fc.js"></script>
在网页模板的最后一行(就是</html>之后)插入另一个JS调用代码:
<script type="text/javascript" src="/script/images.js"></script> ==================
前面是准备工作,下面进入实战
==================
图文列表标签运用
原先你设计的调用图片的标签修改成如下代码:
<a href="{@photourl}" rel="images"><img src="{@photourl}" alt="{@fulltitle}" /></a>
注意,在A标签内多一个 rel="images" 而连接目标是这个图片的地址。
具体的代码如何编写,取决于你怎么设计。我这里只提供图片部分该怎么写。
注意:以前你的设计应该是点击图片打开具体内容页面。现在变成了点击图片出现这个展示大图效果。因此,需要另外加一个标题,加上连接,点击进入具体内容页面。
因为这个效果可以自定义缩略图和大图的分别地址(IMG里面放缩略图地址,A里面放大图地址),但是由于科讯没有调用大图的标签,因此使用这种方法最好不要启用缩略图。否则,点开来也是小图。这点我们期待科讯官方的改进。
==================
文章内容页面的运用
==================
这里需要修改源代码,如果认为没有必要就无需修改了。
打开科讯CMS根目录下的 KS_Cls 文件夹 下的 Kesion.Label.CommonCls.asp 文件。找到最后的如下一段代码:
==============================
Function FormatImglink(content,url,totalpage) set re = nothing
================================
将其修改为:
================================
Function FormatImglink(content,url,totalpage) set re = nothing
=========================
注意,这样修改之后,就没有了点击图片进入下一页的功能了。
=========================
接下来本人要忙于结婚。本人今年应该不会发布什么教程了。希望同道中人能够多发教程,帮助科讯CMS走得更好。 |
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
qun6x12inu12 发表于:2010/6/4 16:54:00 | 只看该作者 查看该作者主题
藤椅
|
|
支持(0) | 反对(0) 顶端 底部 |
ak106ak106 发表于:2010/6/1 21:32:00 | 只看该作者 查看该作者主题
板凳
|
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
ak106ak106 发表于:2010/5/30 9:46:00 | 只看该作者 查看该作者主题
地板
|
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
chenzhengjia 发表于:2010/5/19 11:10:00 | 只看该作者 查看该作者主题
8楼
|
|
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |