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

Posted by 荒野无灯 @ 十月 29, 2009 at 9:25 下午 under wp技巧 26 Comments   

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

1
<a href="http://www.ihacklog.com/wordpress/wp-content/uploads0x16w463t1wqy4t/2009/10/netcard.jpg"><img src="http://www.ihacklog.com/wordpress/wp-content/uploads0x16w463t1wqy4t/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
更新时间：2009年10月27日 累计下载：333 次
MD5 验证： [MD5验证工具下载]


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

随机日志

Comments (26)

 

  1. wuming 说：
    2010年07月29日于3:28 下午

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

    回复
  2. Always.Life 说：
    2010年07月24日于12:46 下午

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

    回复
  3. 洁 说：
    2010年07月1日于8:09 下午

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

    回复
  4. dark 说：
    2009年12月8日于5:55 下午

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

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

    回复
  5. licream 说：
    2009年12月8日于4:15 下午

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

    谢谢!

    回复
  6. licream 说：
    2009年12月7日于5:25 上午

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

    回复
« 早前评论
1 2

Leave a Reply

XHTML: 留言可用标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



1,403 垃圾评论
截获自
Akismet

小提示：可按Ctrl+Enter快速提交 :mrgreen: