下午试了,成功,不算太复杂。
我是 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+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'"
rel="lightbox" title="'+resourceDesc+'">';
htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&mode=preview" />';
htmlCode += '</a>';
}
else if ( preview == 2 ) {
htmlCode = '<a id="res_' + resId+ '" href="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'" type="'+mimeType+'"
rel="lightbox" title="'+resourceDesc+'">';
htmlCode += '<img style="margin: 5px;" border="0" alt="'+resourceDesc+'" src="'+plogBaseUrl+'/resserver.php?blogId='+blogId+'&resource='+encodeURIComponent(resourceName)+'&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: 还是不写了。。。免得被人说侵权。。。