前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress整合Highslide JS 灯箱效果

WordPress整合Highslide JS 灯箱效果

作者头像
HHTjim 部落格
发布2022-09-26 11:25:36
9290
发布2022-09-26 11:25:36
举报
文章被收录于专栏:HHTjim'S 部落格

WordPress整合Highslide JS 灯箱效果

作者:matrix 被围观: 1,434 次 发布时间:2013-09-25 分类:Wordpress 兼容并蓄 | 2 条评论 »

这是一个创建于 3262 天前的主题,其中的信息可能已经有所发展或是发生改变。

更换主题-七彩之家BLUE2.0以及后续的修改 有提到整合auto-highslide灯箱的功能,这次更加完善。

DEMO:http://pan.baidu.com/share/link?shareid=4020387527&uk=3238236832

步骤:

1.将下面代码加到主题的functions.php中,方法你懂得。

代码语言:javascript
复制
<?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 =    
        "<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";  
     echo $defaults_javascript;  
        }  

    add_action('wp_footer', 'highslide_footer');  
    function highslide_footer()  
    {  
    $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
    $defaults_javascript =    
    "\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script> 
    <script type='text/javascript'> 
hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/'; 
hs.showCredits = false; 
hs.creditsPosition = 'bottom left'; 
hs.outlineType = 'custom'; 
hs.dimmingOpacity = 0.3; 
hs.fadeInOut = true; 
hs.align = 'center'; 
hs.captionEval = 'this.thumb.alt'; 


// Add the slideshow controller 
hs.addSlideshow({ 
    slideshowGroup: 'group1', 
    interval: 5000, 
    repeat: true, 
    useControls: true, 
    fixedControls: 'fit', 
    overlayOptions: { 
        opacity: 0.75, 
        position: 'bottom center', 
        offsetX: 0, 
        offsetY: -10, 
        hideOnMouseOut: true 
    } 
}); 

// Chinese simplified language strings 
hs.lang = { 
    cssDirection: 'ltr', 
    loadingText: '载入中...', 
    loadingTitle: '正在载入,点击取消', 
    focusTitle: '置于最前', 
    fullExpandTitle: '原始尺寸', 

    previousText: '上一张', 
    nextText: '下一张', 
    moveText: '移动', 
    closeText: '关闭', 
    closeTitle: '关闭 (退出键)', 
    resizeTitle: '调整尺寸', 
    playText: '播放', 
    playTitle: '播放幻灯片 (空格键)', 
    pauseText: '暂停', 
    pauseTitle: '暂停幻灯片 (空格键)', 
    previousTitle: '上一张 (左方向键)', 
    nextTitle: '下一张 (右方向键)', 
    moveTitle: '移动', 
    fullExpandText: '完整尺寸', 
    number: 'Image %1 of %2', 
    restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。' 
}; 

// gallery config object 
var config1 = { 
    slideshowGroup: 'group1', 
    numberPosition: 'caption', 
    transitions: ['expand', 'crossfade'] 
}; 
         </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, config1 )" $6>$7 </a>';  
$content = preg_replace($pattern, $replacement, $content);  
return $content;  
}  

function hlHighSlide_replace($content)  
{  
        global $post;  
        $defaults = array();  
        $defaults['quicktags'] = 'y';  
        $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;  
          $content = str_replace($HSStrings[$i], $HSCode, $content);  
        return $content;  
    }  



    /////////////////  
?>  

说明:87 行的onclick="return hs.expand(this, config1 )"开启了相册幻灯片功能,如果需要关闭可改为onclick="return hs.expand(this)"

2.下载素材文件,解压到主题目录

下载:

http://www.400gb.com/file/30266321

http://pan.baidu.com/share/link?shareid=3945557249&uk=3238236832

3.最后完工。

效果:

使用的Highslide JS 在线编辑,状态保存:

参考:http://themeidea.com/highslide.html

Highslide js 在线编辑 http://justcoding.iteye.com/blog/595145

http://highslide.com/editor/

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • WordPress整合Highslide JS 灯箱效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档