给wordpress图片加上Highslide特效(修正代码)

2009年10月29日 / 荒野无灯发表于 wp技巧 / 短链接 / 30 条评论

以前我博客用的是lightbox特效来显示图片，这几天又在网上发现一个很cool的js特效库，那就是Highslide 。个人用户是可以免费使用的，只有用于商业用途才需要付费。
这个东东效果咋样呢？可以到我博客上有图片的的文章中看看，目前我用的就是highslide特效比如： http://www.ihacklog.com/net/ping.html 。
我已经把它弄成了插件，类似于：

1	<a href="http://static.ihacklog.com/wp-files/2009/10/netcard.jpg"><img src="http://static.ihacklog.com/wp-files/2009/10/netcard-465x400.jpg" alt="netcard" id="P27600" title="netcard" width="465" height="400" class="aligncenter size-medium wp-image-3" /></a>

的代码可以直接调用Highslide特效显示（特别注意：你在wordpress中插入图片时请选择“链接URL”为“文件url”,如下图示：）。

实际上上面的代码就是wordpress插入图片时的默认代码，所以，这个插件可以在不修改文章内容的情况下直接调用Highslide特效显示图片。目前正在正一步完善中，弄好了我就放出来供大家下载。

万戈童鞋说喜欢不用插件就实现功能，下面我就说下不用装插件就可以实现这么cool功能的方法吧：
先下载

highslide.zip 下载 (76.5 KB, 385 次)

highslide.js highslide.css 两个文件及graphics文件夹，把它解压后上传到你目前使用的主题目录下，如下图：

接下来修改你目前使用的主题目录下的functions.php
在文件中加入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

<?php
###############################################################################
# START wp highslide picture code #
###############################################################################
add_filter('the_content', 'hlHighSlide_replace', '99');
add_action('wp_head', 'highslide_head');

function highslide_head()
{
$hlHighslide_wp_url=get_bloginfo('template_url').'/';
$defaults_javascript =
"\n\t<link href='{$hlHighslide_wp_url}highslide.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='{$hlHighslide_wp_url}highslide.js'></script>
<script type='text/javascript'>
hs.showCredits = true;
hs.creditsHref = 'http://www.ihacklog.com/';
hs.creditsTarget = '_self';
hs.graphicsDir = '{$hlHighslide_wp_url}graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'outer-glow';
hs.wrapperClassName = 'outer-glow';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.3;
//hs.padToMinWidth = true;
if (hs.addSlideshow) hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .6,
position: 'bottom center',
hideOnMouseOut: true
}
});
hs.lang={
loadingText : '图片加载中...',
loadingTitle : '正在加载图片',
closeText : '关闭',
closeTitle : '关闭 (Esc)',
creditsText : 'Powered by <i>荒野无灯</i>',
creditsTitle : 'http://www.ihacklog.com',
moveTitle : '移动图片',
moveText : '移动',
restoreTitle : '小提示：点击可关闭或拖动. 用左右方向键可查看上一张和下一张-_-',
fullExpandTitle : '点击查看原图',
fullExpandText : '查看原图'
};
hs.registerOverlay({
html: '<div class=\"closebutton\" onclick=\"return hs.close(this)\" title=\"Close\"></div>',
position: 'top right',
fade: 2 // fading the semi-transparent overlay looks bad in IE
});

hs.Expander.prototype.onMouseOut = function (sender) {
sender.close();
};

hs.Expander.prototype.onAfterExpand = function (sender) {
if (!sender.mouseIsOver) sender.close();
}
</script>";
echo $defaults_javascript;
}

//add onclick event
function add_onclick_replace ($content)
{
$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '<a$1href=$2$3.$4$5 class="highslide" onclick="return hs.expand(this)" title="Click to enlarge（点击查看大图）" $6>$7 </a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}

function hlHighSlide_replace($content)
{
global $post;
$defaults = array();
$defaults['quicktags'] = 'y';
$defaults['href'] = 'http://www.ihacklog.com/wordpress/wp-content/themes/irresistible/images/logo.png';
$defaults['src'] = 'http://www.ihacklog.com/wordpress/wp-content/themes/irresistible/images/logo.png';
$defaults['alt'] = 'Enter ALT Tag Description';
$defaults['title'] = 'Enter Caption Text';
$defaults['thumbid'] = 'thumb1';
$defaults['show_caption'] = 'y';
$defaults['show_close'] = 'y';

$content=add_onclick_replace($content);

$HSVars = array("SRC", "ALT", "TITLE", "WIDTH", "HEIGHT","THUMBID");
$HSVals = array($defaults['href'], $defaults['src'], $defaults['alt'], $defaults['title'], $defaults['thumbid']);

preg_match_all ('!<img([^>]*)[ ]*[/]{1}>!i', $content, $matches);

$HSStrings = $matches[0];
$HSAttributes = $matches[1];

for ($i = 0; $i < count($HSAttributes); $i++)
{
preg_match_all('!(src|alt|title|width|height|class)="([^"]*)"!i',$HSAttributes[$i],$matches);

$HSSetVars = $HSSetVals = array();
for ($j = 0; $j < count($matches[1]); $j++)
{
$HSSetVars[$j] = strtoupper($matches[1][$j]);
$HSSetVals[$j] = $matches[2][$j];
}
}

$HSClose = <<<EOT
<a href="#" onclick="hs.close(this);return false;" class="highslide-close" title="关闭">Close</a>
EOT;

$HSCaption = <<<EOT
<div class='highslide-caption' id='caption-for-%THUMBID%'>
{$HSPrvNextLinks}
{$HSClose}
<div style="clear:both">%TITLE%</div>

</div>
EOT;

$HSCode = <<<EOT
<img id="%THUMBID%" src="%SRC%" alt="%ALT%" title="%TITLE%" width="%WIDTH%" height="%HEIGHT%" />{$HSCaption}
EOT;

for ($j = 0; $j < count($HSVars); $j++)
{
$key = array_search($HSVars[$j], $HSSetVars);
$val = (is_int($key)) ? $HSSetVals[$key] : $HSVals[$j];
if ($HSVars[$j] == 'THUMBID')
{
$val = 'P' . $post->ID . $i;
}
$HSCode = str_replace('%'.$HSVars[$j].'%', $val, $HSCode);
}

$content = str_replace($HSStrings[$i], $HSCode, $content);

return $content;
}

###############################################################################
# END wp highslide picture code #
###############################################################################
?>