给wordpress图片加上Highslide特效(修正代码) » 荒野无灯weblog

Keep It Simple, Stupid.

荒野无灯weblog

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

以前我博客用的是lightbox特效来显示图片,这几天又在网上发现一个很cool的js特效库,那就是Highslide 。个人用户是可以免费使用的,只有用于商业用途才需要付费。
这个东东效果咋样呢?可以到我博客上有图片的的文章中看看,目前我用的就是highslide特效比如: http://www.ihacklog.com/net/ping.html
我已经把它弄成了插件,类似于:
[cc lang="html"]netcard
的代码可以直接调用Highslide特效显示(特别注意:你在wordpress中插入图片时请 选择“链接URL”为“文件url",如下图示:)。

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

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

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

highslide.zip (76.5 KB)


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

wp_highslide

接下来修改你目前使用的主题目录下的functions.php
在文件中加入如下代码:


        
    ";
 echo $defaults_javascript;
 }

//add onclick event 
function add_onclick_replace ($content)
{ 
$pattern = "/]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
$replacement = '$7 ';
$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 ('!]*)[ ]*[/]{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 = <<Close  
EOT;

                $HSCaption = <<
                {$HSPrvNextLinks}           
                {$HSClose}  
                
%TITLE%
EOT; $HSCode = <<{$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 # ############################################################################### ?>

Tagged in :

All Comments (0)
Gravatar image
No Comments