WordPress整合Highslide JS 灯箱效果
作者:matrix 被围观: 1,886 次 发布时间:2013-09-25 分类:Wordpress 兼容并蓄 | 2 条评论 »
更换主题-七彩之家BLUE2.0以及后续的修改 有提到整合auto-highslide灯箱的功能,这次更加完善。
DEMO:http://pan.baidu.com/share/link?shareid=4020387527&uk=3238236832
步骤:
1.将下面代码加到主题的functions.php中,方法你懂得。
<?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 =
"<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";
echo $defaults_javascript;
}
add_action('wp_footer', 'highslide_footer');
function highslide_footer()
{
$hlHighslide_wp_url=get_bloginfo('template_url').'/';
$defaults_javascript =
"\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script>
<script type='text/javascript'>
hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/';
hs.showCredits = false;
hs.creditsPosition = 'bottom left';
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.3;
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.thumb.alt';
// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.75,
position: 'bottom center',
offsetX: 0,
offsetY: -10,
hideOnMouseOut: true
}
});
// Chinese simplified language strings
hs.lang = {
cssDirection: 'ltr',
loadingText: '载入中...',
loadingTitle: '正在载入,点击取消',
focusTitle: '置于最前',
fullExpandTitle: '原始尺寸',
previousText: '上一张',
nextText: '下一张',
moveText: '移动',
closeText: '关闭',
closeTitle: '关闭 (退出键)',
resizeTitle: '调整尺寸',
playText: '播放',
playTitle: '播放幻灯片 (空格键)',
pauseText: '暂停',
pauseTitle: '暂停幻灯片 (空格键)',
previousTitle: '上一张 (左方向键)',
nextTitle: '下一张 (右方向键)',
moveTitle: '移动',
fullExpandText: '完整尺寸',
number: 'Image %1 of %2',
restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。'
};
// gallery config object
var config1 = {
slideshowGroup: 'group1',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};
</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, config1 )" $6>$7 </a>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
function hlHighSlide_replace($content)
{
global $post;
$defaults = array();
$defaults['quicktags'] = 'y';
$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;
$content = str_replace($HSStrings[$i], $HSCode, $content);
return $content;
}
/////////////////
?>
说明:87 行的onclick="return hs.expand(this, config1 )"
开启了相册幻灯片功能,如果需要关闭可改为onclick="return hs.expand(this)"
2.下载素材文件,解压到主题目录
下载:
http://www.400gb.com/file/30266321
http://pan.baidu.com/share/link?shareid=3945557249&uk=3238236832
3.最后完工。
效果:
使用的Highslide JS 在线编辑,状态保存:
http://highslide.com/editor/?config=%7B%22lang%22%3A+%22zh-s%22,+%22preset%22%3A+%22html-white%22,+%22applyDimming%22%3A+true,+%22dimmingOpacity%22%3A+%220.3%22,+%22hideThumbOnExpand%22%3A+false,+%22alignment%22%3A+%22center%22,+%22captionSource%22%3A+%22thumb.alt%22,+%22captionStyles%22%3A+%22%5Ctpadding%3A+2px;%22,+%22headingSource%22%3A+%22thumb.alt%22,+%22creditsPosition%22%3A+%22bottom+left%22,+%22enableGallery%22%3A+true,+%22numberPosition%22%3A+%22caption%22,+%22enableThumbstrip%22%3A+false,+%22thumbstripMode%22%3A+%22float%22,+%22thumbstripPosition%22%3A+%22below%22,+%22thumbstripRelativeTo%22%3A+%22image%22,+%22thumbstripSize%22%3A+%22280%22,+%22slideshowRepeat%22%3A+true,+%22htmlControlsLayout%22%3A+%22icon-text%22,+%22useTitleBar%22%3A+false,+%22htmlHeadingSource%22%3A+%22a.title%22%7D
参考:http://themeidea.com/highslide.html
Highslide js 在线编辑 http://justcoding.iteye.com/blog/595145
$HSClose = <<<EOT 这局是不是有问题 😐
没问题的,这是php的标记符,EOT可以任意命名,但结尾处必须要对应。