10

13

PJBlog加highslide效果教程

很久之前在博客上加了highslide JS 的功能,上次升级的时候没掉了,于是重新加上了并写下这篇教程。

1、在common\ubbcode.asp中找到
程序代码 程序代码
'-----------多媒体标签----------------

在其下面加上
程序代码 程序代码
'这个就是highslide JS 的功能,添加[photo][/photo]和[photo,图片注释][/photo]来显示图片。
                    
                    re.Pattern="(\[photo\])(.[^\]]*)\[\/photo\]"
                    Set strMatchs=re.Execute(strContent)
                    For Each strMatch in strMatchs
                        tmpStr1=(strMatch.SubMatches(1))
                        strContent=replace(strContent,strMatch.Value,"<a id=""thumb1"" href="""&tmpStr1&""" class=""highslide"" onclick='return hs.expand(this, { captionId: ""caption1"" } )'><img src="""&tmpStr1&""" alt=""Highslide JS"" title=""kanoe.cn"" /></a>",1,-1,0)
                    Next
                                    
                      re.Pattern="\[photo,(.[^\]]*)\](.[^\]]*)(\[\/photo\])"
                    Set strMatchs=re.Execute(strContent)
                    For Each strMatch in strMatchs
                        tmpStr1=strMatch.SubMatches(0)
                        tmpStr2=checkURL(strMatch.SubMatches(1))
                        strContent=replace(strContent,strMatch.Value,"<a id=""thumb1"" href="""&tmpStr2&""" class=""highslide"" onclick='return hs.expand(this, { captionId: ""caption1"" } )'><img src="""&tmpStr2&""" alt="""&tmpStr1&""" title="""&tmpStr1&""" /></a>",1,-1,0)
                    Next
                    
                    re.Pattern="\[photo=(\d*|),(\d*|),(.[^\]]*)\](.[^\]]*)(\[\/photo\])"
                    Set strMatchs=re.Execute(strContent)
                    For Each strMatch in strMatchs
                        tmpStr1=strMatch.SubMatches(0)
                        tmpStr2=strMatch.SubMatches(1)
                        tmpStr3=strMatch.SubMatches(2)
                        tmpStr4=checkURL(strMatch.SubMatches(3))
                        strContent=replace(strContent,strMatch.Value,"<a id=""thumb1"" href="""&tmpStr4&""" class=""highslide"" onclick='return hs.expand(this, { captionId: ""caption1"" } )'><img src="""&tmpStr4&""" alt="""&tmpStr3&""" title="""&tmpStr3&""" width="""&tmpStr1&""" height="""&tmpStr2&""" /></a>",1,-1,0)
                    Next
                        
'highslide JS 效果到此结束。


2、在common\UBBCode_Gecko.js最下面补上
程序代码 程序代码
//highslide效果图像
function UBB_photo(){
if (EditMethod=="normal")
{
         var PopText
          if (PopText=window.prompt(photo_normal,"")) {
                AddText("\n【photo】"+PopText+"[/photo]")  //为了禁止自动转换,已把[]换成【】
   }
}

if (EditMethod=="expert")
{
         AddText("[photo=W,H,title][/photo]")
}
}


3、在common\UBBCode_IE.js最下面补上
程序代码 程序代码
//highslide效果图像
function UBB_photo(){
var UBBSelectrange=document.selection.createRange()
  if (SelectAllow && UBBSelectrange.text!=""){
   UBBSelectrange.text="【photo】"+UBBSelectrange.text+"[/photo]" //为了禁止自动转换,已把[]换成【】
   return
  }    
  
if (EditMethod=="normal")
{
     var PopText
      if (PopText=window.prompt(photo_normal,"")) {
        AddText("\n[photo=w,h,title]"+PopText+"[/photo]")
   }
}

if (EditMethod=="expert")
{
     AddText("[photo=w,h,title][/photo]")
}
}


4、在common\UBBCode_help.js最下面补上
程序代码 程序代码
var photo_normal = "请输入highslide效果图像的 URL。\n标签:[photo,title][/photo][photo=w,h,title][/photo]";


5、在common\UBBconfig.asp中找到
程序代码 程序代码
flash,music,mediaplayer,realplayer,ed2k,mDown,htmlubb,highlightcode

替换成
程序代码 程序代码
flash,music,mediaplayer,realplayer,ed2k,mDown,htmlubb,highlightcode,photo

找到
程序代码 程序代码
Select Case str

在下面加上
程序代码 程序代码
   case "photo":
   Tip="插入highslide js效果图像"


6、在footer.asp中找到
程序代码 程序代码
<div id="foot">

在其上面加上
程序代码 程序代码
<div id="controlbar" class="highslide-overlay controlbar">
    <a href="#" class="previous" onclick="return hs.previous(this)" title="Previous (left arrow key)"></a>
    <a href="#" class="next" onclick="return hs.next(this)" title="Next (right arrow key)"></a>
    <a href="#" class="highslide-move" onclick="return false" title="Click and drag to move"></a>
    <a href="#" class="close" onclick="return hs.close(this)" title="Close"></a>
</div>


7、在header.asp中找到
程序代码 程序代码
</head>

在其上面加上
程序代码 程序代码
<!--highslide JS效果JS文件-->
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
    // remove the registerOverlay call to disable the controlbar
    hs.registerOverlay(
        {
            thumbnailId: null,
            overlayId: 'controlbar',
            position: 'top right',
            hideOnMouseOut: true
        }
    );    
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.captionEval = 'this.thumb.title';
</script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />


8、最后下载附件,把其中的photo.gif放到skin目录下的UBB\Icons中,把highslide目录放到根目录下

收工,享受highslide的效果吧!





[本日志由 独木舟 于 2008-10-13 07:50 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: Code
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.