Skip to content

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

2009 十月 29
by 荒野无灯

以前我博客用的是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”,如下图示：）。

选择“文件url“作为 链接url

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

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

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

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

wp_highslide

接下来修改你目前使用的主题目录下的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                        #
###############################################################################
?>

喜欢这篇文章吗?

请订阅本站 RSS feed 或填写您的邮件地址，订阅我们的精彩内容：,欢迎点击这里捐赠以支持荒野无灯转播到腾讯微博 转播到腾讯微博

作者：荒野无灯
出处：Hacklog【Hacklog】

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自Hacklog【荒野无灯weblog】

本文链接: http://ihacklog.com/?p=2769

随机日志

from → wp技巧

30 Responses Post a comment
  1. G字头老大 permalink
    四月 24, 2011

    效果不佳啊！！

    回复
  2. tengzu permalink
    十二月 7, 2010

    原来站长使用的是linux系统啊，不禁肃然起敬啊~~

    回复
  3. Ben permalink
    十一月 9, 2010

    能不能在首页缩略图调用这个效果

    回复
  4. winson permalink
    九月 25, 2010

    这是个好东西啊，看到贵站上的效果，正想询问，原来是博主的作品啊，谢谢啦！

    回复
  5. wuming permalink
    七月 29, 2010

    搞那么多插件很不实用啊~而且像博主的图片鼠标放上去冒出来一块东西感觉不爽~~个人看法

    回复
  6. Always.Life permalink
    七月 24, 2010

    上一张，下一张的那个箭头是怎么弄出来的？我的一页内的照片不能轮播，帮忙提示一下，我用的是Highslide 4 WordPress

    回复
    • 荒野无灯 permalink
      七月 24, 2010

      我用的highslide JS是带相册功能的。你可以试着换个JS。或者用我折腾的代码或者插件。

      回复
  7. 洁 permalink
    七月 1, 2010

    更新的链接失效了，还有其他链接吗

    回复
  8. dark permalink
    十二月 8, 2009

    135行 $key = array_search($HSVars[$j], $HSSetVars);
    报错，是因为你把 $HSSetVars 的定义放在上面那个for 里面了，所以说第二个参数错误。

    见107行 $HSSetVars = $HSSetVals = array();

    回复
  9. licream permalink
    十二月 8, 2009

    荒野无灯:
    @licream, 已经放出：http://www.hacklog.cn/wordpress/plugins/wp-highslide-picture.html

    谢谢!

    回复
  10. licream permalink
    十二月 7, 2009

    - -,你的图片插件好像更新了….这文章的代码也更新了吗?

    回复
  11. licream permalink
    十二月 2, 2009

    哈哈，谢谢博主提供这么好的方法。已经用上了。
    上面说的空白页。可能你用了其它图片插件。有突冲。我开始也是这样。

    回复
  12. gil permalink
    十一月 16, 2009

    这个代码加入到functions.php这个里面之后出现错误，提示这里有错误$key = array_search($HSVars[$j], $HSSetVars);

    回复
    • gil permalink
      十一月 16, 2009

      @gil, 又添加一次，结果打开主页变成一片空白，什么都没有了

      回复
      • 荒野无灯 permalink
        十一月 16, 2009

        @gil, 你修改的是你目前使用的主题目录下的functions.php吗？有没有修改我的代码？比如在其中加了空格什么的？

        回复
        • gil permalink
          十一月 19, 2009

          @荒野无灯, 对啊，就是在这个主题上测试的，我什么都没有改动，直接复制进去的，本机测试好几次都没有成功，目前我还没有弄明白哪里有问题

          回复
        • 荒野无灯 permalink
          十一月 19, 2009

          @gil,
          要不你加我QQ吧？我替你看看是哪里出了问题。这个代码我是用多款主题测试过的，没有问题。
          你QQ多少？可以发邮件给我：admin在hacklog.cn

          回复
  13. gil permalink
    十一月 12, 2009

    又可以免去一个插件了 真的很不错！~~

    回复
    • 荒野无灯 permalink
      十一月 12, 2009

      @gil, 去你博客看了，你目前用的是highslide4wp 这个插件对吧

      回复
      • gil permalink
        十一月 12, 2009

        @荒野无灯, 是的，正在想替换成你这个不用插件的方法，你给的functions.php这段代码里的个人信息都需要我自己修改一下才可以 对吧

        回复
        • 荒野无灯 permalink
          十一月 12, 2009

          @gil, 不需要的。直接拿过去就可以用的。那个网址是版权信息，与功能无关的，当然，如果你要修改也可以的。

          回复
  14. keon permalink
    十一月 1, 2009

    很帅很帅～～

    回复
  15. 万戈 permalink
    十月 27, 2009

    哟～不错，我最喜欢免插件的方法了，期待呀期待～

    回复
    • 荒野无灯 permalink
      十月 28, 2009

      @万戈, 免插件的方法已经出来了，不过我觉得还是做成插件方便点-_-

      回复
      • 万戈 permalink
        十月 31, 2009

        @荒野无灯, 插件是控制全局的，就需要整站加载多余的JS和CSS，这就是为什么我不喜欢用插件的原因了
        免插件版很帅，不用就太对不起你了，收藏+感谢

        回复
        • 荒野无灯 permalink
          十一月 1, 2009

          @万戈,
          谢谢支持！
          确实，wordpress的插件机制很好，但是也存在一个问题，就是你说的那个，它所有东西都是全局加载的，不能实现按需加载。所以如果用插件，肯定对执行效率有影响的。

          回复
  16. Louis Han permalink
    十月 27, 2009

    不错 很炫

    回复

Leave a Reply

Allowed Tags - You may use these HTML tags and attributes in your comment.

<a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <q cite=""> <strong>

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS