Oct 26

CoolCode默认显示模式是自动换行,当你的正文版面宽度很窄时,这样频繁的换行会使阅读代码变得困难。于是做了一点小改动,当点击代码界面时,自动显示滚动条,此时代码不换行。

需要改动的文件有.css,.js,.php。

.css


.hl-surround {
    background-color: #F9FBFC;
    border: 1px solid #C3CED9;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    width: 98%;
    height: auto;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    font-family: "Courier New", "BitStream Vera Sans Mono", Fixedsys, Courier, monospace;
}

主要是添加(改动)overflow: hidden 和 white-space: normal 这两个属性;

.js


function switchscroll(id){
if(id.style.overflow!="auto"){
	id.style.overflow="auto";
	id.style.whiteSpace="nowrap";
}else{
	id.style.overflow="hidden";
	id.style.whiteSpace="normal";
}
}

把这个函数添加进去;

.php


<div class="hl-surround" onclick="switchscroll(this);">

在.php中找到<div class="hl-surround",在其中添加一个onclick的事件,一共有四处。

示例,点击代码窗口:


$options = array(
    'numbers' => HL_NUMBERS_LI,
);
$hl =& Text_Highlighter::factory($lang, $options);
$this->blocks[$blockID] .= '<div class="hl-surround" onclick="switchscroll(this);">' . str_replace($this->hl_class, $this->hl_style, $hl->highlight($txt)) . '</div>';
$this->blocks[$blockID] = preg_replace('/<span style="[^"]*?"></span>/', '', $this->blocks[$blockID]);
$this->blocks[$blockID] = str_replace('<ol class="hl-main">',
    '<ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)">',
    $this->blocks[$blockID]);
$this->blocks[$blockID] = str_replace(""> </span></li>", "">&nbsp;</span></li>", $this->blocks[$blockID]);
$this->blocks[$blockID] = preg_replace('/<li><span style=(.*?)> </si', '<li><span style=\1>&nbsp;<', $this->blocks[$blockID]);

if ($hackphp) {
    $this->blocks[$blockID] = str_replace("<span style="color: Blue;">&lt;?php</span></li>n<li>", '', $this->blocks[$blockID]);
    $this->blocks[$blockID] = str_replace('<li><span style="color: Blue;">?&gt;</span></li>', '', $this->blocks[$blockID]);
}

附件是改好的文件。

BTW: IE真是...不好说了,注意到没,点击后,在FireFox下不会出现垂直滚动条,因为那个滚动条宽度并没计算到原容器里面,而在IE下点击,会出现垂直滚动条,它把滚动条的宽度也计算进去了>_<


Oct 23

该插件可以让你通过 <!--page--> 注释标签来将一个长篇文章分页显示,效果见NirSoft Software Collection

之所以叫“虚拟分页”,是因为本插件只是通过Javascript+CSS来隐藏部分页内容,所以实际上文章内容在页面载入时是全部加载的。Virtual Pagination不能提高你的长篇文章载入速度,但是可以很好的控制文章的版面长度,至于切换页面,当然是实时的了。

插件的使用很简单,下载解压后把vpage目录上传到WordPress的Plugins目录下,在后台激活Virtual Pagination;在文章中通过<!--page--> 来进行分页。

注意:使用本插件用<!--page-->分页时,有分页文章的页面可能不能通过XHTML验证,原因是WordPress的wpautop生成了一些多余的未封闭的p标签。通常这并不影响显示效果。

如果您特别在意,目前解决的办法是,文章手工分段(或者使用内置的所见即所得编辑器),然后使用在分页文章的自定义字段添加:“killautop”(不包括引号),值为 1

Install Notes (English):

This plugin allows long post to be split across multiple Virtual Page,and switch pages realtime.

DEMO: NirSoft Software Collection

1. Download and extract it,then upload to your wordpress plugins directory.

2. Activate it in administrator’s interface.

3. Use:
< linenum="off">

or [!--page--]

tag to pagination the post.

4. If you care about XHTML ,you can add a custom field of 'killautop' set to '1' to this paged post to disable the auto formatting.


Oct 16

Shutter是一个能实现类似LightBox效果的Javascript脚本,也就是在当前页面全屏遮罩下显示缩略图对应的原始图片,它比LightBox小多了,只有8K左右大小。作者同时写出了WordPress的插件Shutter-Reload。不过Shutter-Reload本身不带缩略图生成功能,所以我们可以结合iimage-Gallery在文章中方便的实现Shutter效果的图片集。

Shutter-Reload有个选项叫"Shutter on all image links with rel="prettyPhoto" or "shutterset" or "shutterset_123"",我们只要利用这个稍微修改一下iimage-Gallery就行了,让它生成缩略图的时候同时添加相应的Class标记。

把修改好的iimage-gallery.php覆盖原来的文件(请先备份),然后用如下语句添加Gallery:


<gallery crop="true"  stand_alone="false" shutterset="quakemachine">
图片地址1
...
图片地址N
</gallery>

除了shutterset,前面的都属于原iimage-Gallery自带的选项,现在设置为当独立浏览模式关闭时(也就是stand_alone="false")使用Shutter方式浏览图片,shutterset是个ID,在当前页面需唯一,可以设置为任意英文,数字和"-"号,不支持中文。具体效果可以参考MRemote一文的截图。

Shutter和iimage-Gallery请到原作者页面下载,附件是改好的iimage-gallery.php文件。


Oct 12

以前都用LastRSS来实现本站的PlayWithTag以及Tag HotList的功能,大体还可以,不过有些关键字在某些站点不能获取正确的结果,今天试了试Google AJAX Feed API,哎,不得不佩服Google的技术,无论适用性和速度都比以前用LastRSS要好多了。

可以在本站首页顶和文章页面下面体验这些效果,关注最新的Tag相关文章。


Sep 26

The player will show in this paragraph

简介:

这是一个用于在文章中发布图片的插件,它使用Ruochi.com的Bcastr Flash技术载入图片,然后轮播图片,主要的特点有:

.图片自动抗锯齿
.3种文字位置设定
.4种图片过渡效果,过渡更自然,
.可定义是否显示按钮
.可定义是否在新窗后中打开连接
.自定义尺寸,自动适应任何比例,图片不变形
.自定义图片标题
.浏览过程中下载
.自定义图片连接
.自定界面色彩

安装设置:

下载文章附件的插件包,解压后在wp-bcastr目录应有3个文件:wp-bcastr.php(插件主文件),wp_bcastr_config.php(配置文件),bcastr31.swf(播放器主文件),您可能需要编辑配置文件以适应你的站点系统(通常不需要配置也能很好的工作),只需打开wp_bcastr_config.php文件,内容如下:


<?php
//在这里设置图片播放器的参数;
$wp_castr_width = "500px"; //播放器默认宽度
$wp_castr_height = "280px"; //播放器默认高度
//扩展参数;
$wp_castr_ext_TitleTextColor = "#000000"; //图片名称文字颜色
$wp_castr_ext_TitleBgColor = "#FF6600"; //图片名称文字背景颜色
$wp_castr_ext_TitleBgAlpha = "60"; //图片名称文字背景颜色透明度:0-100值
$wp_castr_ext_TitleBgPosition = "0"; //图片名称文字位置,0表示文字在顶端,1表示文字在底部,2表示文字在顶端浮动
$wp_castr_ext_BtnDefaultColor = "#FF6600"; //按键默认的颜色
$wp_castr_ext_BtnOverColor = "#000033"; //按键当前的颜色
$wp_castr_ext_AutoPlayTime = "8"; //自动播放时间:单位是秒
$wp_castr_ext_Tween = "3"; //图片过渡效果:0,表示亮度过渡,1表示透明度过渡,2表示模糊过渡,3表示运动模糊过渡
$wp_castr_ext_IsShowBtn = "1"; //是否显示按钮:1表示显示按键,0表示隐藏按键
$wp_castr_ext_WinOpen = "_blank"; //_blank表示新窗口打开。_self表示在当前窗口打开
?>

每个参数都有详尽的描述。

修改好后把wp-bcastr目录上传到您的站点插件目录,通常是/wp-content/plugins/,然后到后台激活WP BCastr这个插件。

使用:

WP BCastr使用非常简单,当你激活插件后,它在QuickTag栏创建了一个按钮"BCastr",你只需在撰写页面的时候把你的图片连接贴到撰写窗口,然后选择这些连接,点击"BCastr"按钮即可。注意:多图片用","号(半角逗号)分开,写成一行不要回车。例如:


<bcastr>500,280,<img src="https://www.quakemachinex.com/blog/wp-content/images/WarOfTheWorld.jpg" alt="世界大战" title="世界大战" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/MIDIMe.jpg" alt="DJ" title="DJ" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/Motor.jpg" alt="New Motor" title="New Motor" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/BruceLee.jpg" alt="Bruce Lee" title="Bruce Lee" />,<img src="https://www.quakemachinex.com/blog/wp-content/images/FireFoxWal.jpg" alt="FireFox" title="FireFox" /></bcastr>

"500,280,"表示最终播放器的大小,如果不设定将维持默认值。

如果你安装了本站的另外一个插件Multi Image Uploader Reload ,用它上传图片的同时就会自动生成WP BCastr所需的代码。图片文件的描述(标题),只需修改此图片的title属性即可。

The player will show in this paragraph

问题:

虽然这个Flash支持任意大的尺寸的图片,但是我强烈建议您不要这么做,巨大的图片(比如超过1900X1200)在缩放时会导致浏览器处理器占用极高;关于图片的数量,我也没有细致的测试,10来个问题不大。

目前不支持在撰写中设定扩展参数;


[2/5]  < 1 2 3 4 5 >