账号通
    

账号  

密码  

78866

查看

84

回复
主题:★★2009最后一勃!图片当页放大JS教程★★★适用于企业站产品展示★★图片站图片预览效果★★兼容IE6以上以及其他已知浏览器★★ [收藏主题] 转到:  
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2009/12/2 17:52:00   | 显示全部帖子 查看该作者主题 楼主 
科汛在线考试系统(NET)

在这里首先感谢蓝色理想lifeseato的JS教程。是他的教程让我受到启发。教程地址:http://bbs.blueidea.com/thread-2959517-1-1.html


 


本人结合蓝色理想lifeseato教程,配合科讯CMS6.0最新版本出此教程。科讯CMS5.x以及更老版本由于标签的实现方式不一样,无法实现这个效果。


 


上图预览:(点缩略小图,在当前页面弹出一个层,展示大图。)


 



此主题相关图片如下:未命名.jpg
未命名.jpg


 


首先说一下浏览器兼容状况:


 


兼容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)
           dim re:Set re=new RegExp
           re.IgnoreCase =true
           re.Global=True
     '去除onclick,onload等脚本
            're.Pattern = "\s[on].+?=([\""|\'])(.*?)\1"
            'Content = re.Replace(Content, "")
   Dim LinkStr
      If TotalPage=1 Then
    LinkStr="href=""$2"" target=""_blank"""
   Else
    LinkStr="href=""" & Url & """"
   End If
   
     '将SRC不带引号的图片地址加上引号
            re.Pattern = "<img.*?\ssrc=([^\""\'\s][^\""\'\s>]*).*?>"
            Content = re.Replace(Content, "<a " & LinkStr & "><img src=""$2"" alt=""点击浏览下一页"" onmousewheel=""return bbimg(this)"" onload=""javascript:resizepic(this)"" border=""0""/></a>")
     '正则匹配图片SRC地址
     re.Pattern = "<img.*?\ssrc=([\""\'])([^\""\']+?)\1.*?>"
           Content = re.Replace(Content, "<a " & LinkStr & "><img src=""$2"" alt=""点击浏览下一页"" onmousewheel=""return bbimg(this)"" onload=""javascript:resizepic(this)"" border=""0""/></a>")


    set re = nothing
          FormatImglink = content
  end function
End Class
%>


 


================================


 


将其修改为:


 


================================


 


  Function FormatImglink(content,url,totalpage)
           dim re:Set re=new RegExp
           re.IgnoreCase =true
           re.Global=True
     '去除onclick,onload等脚本
            're.Pattern = "\s[on].+?=([\""|\'])(.*?)\1"
            'Content = re.Replace(Content, "")
   Dim LinkStr
      If TotalPage=1 Then
    LinkStr="href=""$2"" target=""_blank"""
   Else
    LinkStr="href=""$2"" target=""_blank"""
   End If
   
     '将SRC不带引号的图片地址加上引号
            re.Pattern = "<img.*?\ssrc=([^\""\'\s][^\""\'\s>]*).*?>"
            Content = re.Replace(Content, "<a " & LinkStr & " rel=""images""><img src=""$2"" alt=""{$GetArticleShortTitle}"" border=""0""/></a>")
     '正则匹配图片SRC地址
     re.Pattern = "<img.*?\ssrc=([\""\'])([^\""\']+?)\1.*?>"
           Content = re.Replace(Content, "<a " & LinkStr & " rel=""images""><img src=""$2"" alt=""{$GetArticleShortTitle}"" border=""0""/></a>")


    set re = nothing
          FormatImglink = content
  end function
End Class
%>


 


=========================


 


注意,这样修改之后,就没有了点击图片进入下一页的功能了。


 


=========================


 


接下来本人要忙于结婚。本人今年应该不会发布什么教程了。希望同道中人能够多发教程,帮助科讯CMS走得更好。




 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.06250秒 powered by KesionCMS 9.0