为KesionCMS V8系列文章内容页添加HighSlide Js图片特效-领先建站CMS提供服务商我们专注于CMS建站产品的研发

7322 查看	12 回复

主题：[分享]为KesionCMS V8系列文章内容页添加HighSlide Js图片特效 [收藏主题]

转到：

悠客当前离线

213 主题	15 广播	7 粉丝

级别:二年级

用户积分:996 分
登录次数:401 次
注册时间:2010/11/8
最后登录:2019/10/28

悠客发表于：2012/3/31 15:49:00 | 只看该作者查看该作者主题楼主

做官网就用科汛智能建站系统!

其实HighSlide Js图片特效已经比较古老了，感兴趣的朋友可以百度下相关知识。本文仅针对文章系统内容页实现此功能。

下面是实现方法：

一、修改文章系统内容页模板

请自行对照修改红色部分代码

复制代码

<link href="{$GetInstallDir}images/style.css" type=text/css rel=stylesheet>
<link href="{$GetInstallDir}ks_inc/highslide/highslide.css" type=text/css rel=stylesheet>
<style type="text/css">
.innerlink{color:#FF6600;font-weight:bolder;text-decoration:none}
</style>
<script src="{$GetInstallDir}ks_inc/jquery.js" type="text/javascript"></script>
<script src="{$GetInstallDir}ks_inc/common.js" type="text/javascript"></script>
<script src="{$GetInstallDir}ks_inc/highslide/highslide.js" type="text/javascript"></script>
<script type="text/javascript">
hs.graphicsDir = '/ks_inc/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.wrapperClassName = 'dark borderless floating-caption';
hs.fadeInOut = true;
hs.dimmingOpacity = 1; //数字1为全黑背景
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<SCRIPT language=JavaScript type=text/JavaScript>
<!--
//图片等比例缩放
var FitWidth = 400; //图片宽度
var FitHeight = 300; //图片高度
function ResizePic(ImgTag)
{
var image = new Image();
image.src = ImgTag.src;
if(image.width>0 && image.height>0){
if(image.width/image.height >= FitWidth/FitHeight){
if(image.width > FitWidth){
ImgTag.width = FitWidth;
ImgTag.height = (image.height*FitWidth)/image.width;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
else{
if(image.height > FitHeight){
ImgTag.height = FitHeight;
ImgTag.width = (image.width*FitHeight)/image.height;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
}
}
//-->
</SCRIPT>

说明：在这里请将原来自带的图片缩放代码去掉。

二、打开Ks_Cls/Kesion.Label.CommonCls.asp，在文件最后找到Function FormatImglink(content,url,totalpage)这段函数，全部改为

复制代码

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="class=""highslide"" onclick=""return hs.expand(this)"" 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=""" & GetNodeText("title") & """ onload=""javascript:ResizePic(this)"" border=""0""/></a>")
'正则匹配图片SRC地址
re.Pattern = "<img.*?\ssrc=([\""\'])([^\""\']+?)\1.*?>"
Content = re.Replace(Content, "<a " & LinkStr & "><img src=""$2"" alt=""" & GetNodeText("title") & """ onload=""javascript:ResizePic(this)"" border=""0""/></a>")
set re = nothing
FormatImglink = content
end function