给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”,如下图示：）。

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

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

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

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

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 或填写您的邮件地址，订阅我们的精彩内容：

随机日志

< 没有标签 >

回复 (30)

  1. G字头老大  / 回复

    效果不佳啊！！

  2. tengzu  / 回复

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

  3. Ben  / 回复

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

  4. winson  / 回复

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

  5. wuming  / 回复

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

  6. Always.Life  / 回复

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

    • 荒野无灯  / 回复

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

  7. 洁  / 回复

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

  8. dark  / 回复

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

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

  9. licream  / 回复

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

    谢谢!

  10. licream  / 回复

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

  11. licream  / 回复

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

  12. gil  / 回复

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

    • gil  / 回复

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

      • 荒野无灯  / 回复

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

        • gil  / 回复

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

        • 荒野无灯  / 回复

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

  13. gil  / 回复

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

    • 荒野无灯  / 回复

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

      • gil  / 回复

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

        • 荒野无灯  / 回复

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

  14. keon  / 回复

    很帅很帅～～

  15. 万戈  / 回复

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

    • 荒野无灯  / 回复

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

      • 万戈  / 回复

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

        • 荒野无灯  / 回复

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

  16. Louis Han  / 回复

    不错 很炫

发表评论 修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

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

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

引用通告 (0)

› 尚无引用通告。

开灯