歡迎光臨, 訪客. 請先 登入註冊一個帳號.
四月 29, 2024, 08:05:01 下午
19595 文章 在 3865 主題 由 4580 會員
最新註冊會員: aa123aa1
LifeType 中文開發論壇  |  開發  |  核心補強  |  [問題]如何將lightbox 的 ref 加入 htmlarea « 上篇主題 下篇主題 »
頁: [1]
作者 主題: [問題]如何將lightbox 的 ref 加入 htmlarea  (閱讀 14589 次)
lorenhsu1128
新手見習
*
文章: 3


檢視個人資料 個人網站
« 於: 四月 11, 2006, 10:52:02 上午 »

HI ALL
請問一下大家
要修改htmlarea的哪一個JS檔 才可以把預設插入圖片(resource跟外部連結)的語法修改成支援lightbox呢
改成<a href="mode縮圖" rel="lightbox">原圖resource</a>
這樣就超讚的
因為每次發文都用HTML模式,感覺起來有些不方便

感恩喔

另,剛PO了一篇lightbox 2.02的安裝過程 http://www.kong78.com/blog/1/2/2006/04/10/6
看了lss老師的文章,掙扎換TinyMCE中...
望穿秋水的1.1...
« 最後編輯時間: 四月 11, 2006, 12:06:07 下午 由 lorenhsu1128 » 已記錄

prologic 空間租用中
magicbug
新手見習
*
文章: 29


檢視個人資料
« 回覆文章 #1 於: 四月 11, 2006, 03:09:14 下午 »

下午试了,成功,不算太复杂。
我是 lt1.0.3 加 tinymce2.0.5(这个版本来自于svn Lt1.1,Mark搞的) ,如果是 htmlarea ,第6步不用做,其它一样。
主要步骤有:
1、上传 lightbox 至 /js目录下,现在 lightbox.js 的路径为 /js/lightbox202/js/lightbox.js ,这个路径等会儿要用到。
2、修改 lightbox.css 中背景图像url为正确路径,有三处。
3、修改 lightbox.css 中 #imageData 定义中加入一行:
程式碼:
font: 9pt Verdana, Helvetica, sans-serif;
这将会使图片描述字体大一些,对我们中文用户必须要加。
4、修改每一个Template的head.template,在</head>前加入:
程式碼:
<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/prototype.js")}"></script>
<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/scriptaculous.js?load=effects")}"></script>
<script type="text/javascript" src="{$url->getUrl("/js/lightbox202/js/lightbox.js")}"></script>
<link rel="stylesheet" href="{$url->getUrl("/js/lightbox202/css/lightbox.css")}" type="text/css" media="screen" />
5、修改tinymce下面的htmlarea-plog-resourcelist.js文件中的 _generateResourceLink 函数:
    var htmlCode = '';
    if( type == 1 ) {
       // if the resource is an image, check the second parameter to see wether we'd like
       // to show the preview with a link to the real size image or the real image
       // inlined with the text
       if( preview == 1 ) {
          htmlCode = '<a id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&amp;resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'" rel="lightbox" title="'+resourceDesc+'">';
          htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&amp;resource='+encodeURIComponent(resourceName)+'&amp;mode=preview" />';
          htmlCode += '</a>';
       }
      else if ( preview == 2 ) {
          htmlCode = '<a id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&amp;resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'" rel="lightbox" title="'+resourceDesc+'">';
          htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&amp;resource='+encodeURIComponent(resourceName)+'&amp;mode=medium" />';
          htmlCode += '</a>';
      }
红色为新加。
6、由于tinymce对html进行了清理,所以在 tiny_mce-plog.js 文件中 extended_valid_elements 中 a 标签加入 "|rel",以允许rel属性。
好了。

刚才忘了,补充7、在lightbox.js中还要修改:
var fileLoadingImage = "/js/lightbox202/images/loading.gif";      
var fileBottomNavCloseImage = "/js/lightbox202/images/closelabel.gif";
这两个图片路径。

demo: 还是不写了。。。免得被人说侵权。。。
« 最後編輯時間: 四月 11, 2006, 03:41:50 下午 由 magicbug » 已記錄
lorenhsu1128
新手見習
*
文章: 3


檢視個人資料 個人網站
« 回覆文章 #2 於: 四月 11, 2006, 03:29:27 下午 »

喔耶~~
感謝喔
我已經改好了喔
已記錄

prologic 空間租用中
magicbug
新手見習
*
文章: 29


檢視個人資料
« 回覆文章 #3 於: 四月 11, 2006, 03:34:22 下午 »

 微笑 ,效果真的很不错。。。
已記錄
magicbug
新手見習
*
文章: 29


檢視個人資料
« 回覆文章 #4 於: 四月 11, 2006, 08:36:40 下午 »

同样原理,修改 album.template ,可以把 lightbox 的多张图片显示效果加到用户相册中。
已記錄
頁: [1]
LifeType 中文開發論壇  |  開發  |  核心補強  |  [問題]如何將lightbox 的 ref 加入 htmlarea « 上篇主題 下篇主題 »
    前往: