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.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

30 Responses Post a comment

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