WordPress整合Highslide JS 灯箱效果

作者:Matrix 被围观: 668 次 发布时间:2013-09-25 分类:wordpress建站 兼容并蓄 码字型 | 2 条评论 »

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

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

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

步骤:

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

  1. <?php  
  2.     //////////////START wp highslide picture code  /////////////  
  3. add_filter('the_content', 'hlHighSlide_replace', '99');  
  4.   
  5.     add_action('wp_head', 'highslide_head');  
  6.     function highslide_head()  
  7.         {  
  8.         $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
  9.         $defaults_javascript =    
  10.         "<link href='{$hlHighslide_wp_url}highslide/highslide.css' rel='stylesheet' type='text/css' />";  
  11.      echo $defaults_javascript;  
  12.         }  
  13.    
  14.     add_action('wp_footer', 'highslide_footer');  
  15.     function highslide_footer()  
  16.     {  
  17.     $hlHighslide_wp_url=get_bloginfo('template_url').'/';  
  18.     $defaults_javascript =    
  19.     "\n\t<script type='text/javascript' src='{$hlHighslide_wp_url}highslide/highslide.js'></script> 
  20.     <script type='text/javascript'> 
  21. hs.graphicsDir = '{$hlHighslide_wp_url}highslide/graphics/'; 
  22. hs.showCredits = false; 
  23. hs.creditsPosition = 'bottom left'; 
  24. hs.outlineType = 'custom'; 
  25. hs.dimmingOpacity = 0.3; 
  26. hs.fadeInOut = true; 
  27. hs.align = 'center'; 
  28. hs.captionEval = 'this.thumb.alt'; 
  29.  
  30.  
  31. // Add the slideshow controller 
  32. hs.addSlideshow({ 
  33.     slideshowGroup: 'group1', 
  34.     interval: 5000, 
  35.     repeat: true, 
  36.     useControls: true, 
  37.     fixedControls: 'fit', 
  38.     overlayOptions: { 
  39.         opacity: 0.75, 
  40.         position: 'bottom center', 
  41.         offsetX: 0, 
  42.         offsetY: -10, 
  43.         hideOnMouseOut: true 
  44.     } 
  45. }); 
  46.  
  47. // Chinese simplified language strings 
  48. hs.lang = { 
  49.     cssDirection: 'ltr', 
  50.     loadingText: '载入中...', 
  51.     loadingTitle: '正在载入,点击取消', 
  52.     focusTitle: '置于最前', 
  53.     fullExpandTitle: '原始尺寸', 
  54.  
  55.     previousText: '上一张', 
  56.     nextText: '下一张', 
  57.     moveText: '移动', 
  58.     closeText: '关闭', 
  59.     closeTitle: '关闭 (退出键)', 
  60.     resizeTitle: '调整尺寸', 
  61.     playText: '播放', 
  62.     playTitle: '播放幻灯片 (空格键)', 
  63.     pauseText: '暂停', 
  64.     pauseTitle: '暂停幻灯片 (空格键)', 
  65.     previousTitle: '上一张 (左方向键)', 
  66.     nextTitle: '下一张 (右方向键)', 
  67.     moveTitle: '移动', 
  68.     fullExpandText: '完整尺寸', 
  69.     number: 'Image %1 of %2', 
  70.     restoreTitle: '单击关闭图片,单击不放可拖动。使用方向键切换图片。' 
  71. }; 
  72.  
  73. // gallery config object 
  74. var config1 = { 
  75.     slideshowGroup: 'group1', 
  76.     numberPosition: 'caption', 
  77.     transitions: ['expand', 'crossfade'] 
  78. }; 
  79.          </script>";  
  80.  echo $defaults_javascript;  
  81.  }  
  82.    
  83. //add onclick event   
  84. function add_onclick_replace ($content)  
  85. {   
  86. $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";  
  87. $replacement = '<a$1href=$2$3.$4$5 class="highslide"  onclick="return hs.expand(this, config1 )" $6>$7 </a>';  
  88. $content = preg_replace($pattern$replacement$content);  
  89. return $content;  
  90. }  
  91.   
  92. function hlHighSlide_replace($content)  
  93. {  
  94.         global $post;  
  95.         $defaults = array();  
  96.         $defaults['quicktags'] = 'y';  
  97.         $defaults['alt'] = 'Enter ALT Tag Description';  
  98.         $defaults['title'] = 'Enter Caption Text';  
  99.         $defaults['thumbid'] = 'thumb1';  
  100.         $defaults['show_caption'] = 'y';  
  101.         $defaults['show_close'] = 'y';  
  102.         $content=add_onclick_replace($content);  
  103.         $HSVars = array("SRC""ALT""TITLE""WIDTH""HEIGHT","THUMBID");  
  104.         $HSVals = array($defaults['href'], $defaults['src'], $defaults['alt'], $defaults['title'], $defaults['thumbid']);  
  105.         preg_match_all ('!<img([^>]*)[ ]*[/]{1}>!i', $content$matches);  
  106.         $HSStrings = $matches[0];  
  107.         $HSAttributes = $matches[1];  
  108.         for ($i = 0; $i < count($HSAttributes); $i++)  
  109.         { preg_match_all('!(src|alt|title|width|height|class)="([^"]*)"!i',$HSAttributes[$i],$matches); 
  110.           $HSSetVars = $HSSetVals = array(); 
  111.           for ($j = 0; $j < count($matches[1]); $j++) 
  112.             { $HSSetVars[$j] = strtoupper($matches[1][$j]); 
  113.               $HSSetVals[$j] = $matches[2][$j];} 
  114.         } 
  115.         $HSClose = <<<EOT 
  116.                 <a href="#" onclick="hs.close(this);return false;" class="highslide-close"  title="关闭">Close</a>   
  117. EOT; 
  118.                 $HSCaption = <<<EOT 
  119.                 <div class='highslide-caption' id='caption-for-%THUMBID%'> 
  120.                 {$HSPrvNextLinks}            
  121.                 {$HSClose}   
  122.                 <div style="clear:both">%TITLE%</div> 
  123.                 </div> 
  124. EOT; 
  125.             $HSCode = <<<EOT 
  126. <img id="%THUMBID%" src="%SRC%" alt="%ALT%" title="%TITLE%" width="%WIDTH%"  height="%HEIGHT%" />{$HSCaption}  
  127. EOT;  
  128.           $content = str_replace($HSStrings[$i], $HSCode$content);  
  129.         return $content;  
  130.     }  
  131.       
  132.       
  133.       
  134.     /////////////////  
  135. ?>  

说明: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 灯箱效果

 

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

http://highslide.com/editor/?config=%7B%22lang%22%3A+%22zh-s%22,+%22preset%22%3A+%22html-white%22,+%22applyDimming%22%3A+true,+%22dimmingOpacity%22%3A+%220.3%22,+%22hideThumbOnExpand%22%3A+false,+%22alignment%22%3A+%22center%22,+%22captionSource%22%3A+%22thumb.alt%22,+%22captionStyles%22%3A+%22%5Ctpadding%3A+2px;%22,+%22headingSource%22%3A+%22thumb.alt%22,+%22creditsPosition%22%3A+%22bottom+left%22,+%22enableGallery%22%3A+true,+%22numberPosition%22%3A+%22caption%22,+%22enableThumbstrip%22%3A+false,+%22thumbstripMode%22%3A+%22float%22,+%22thumbstripPosition%22%3A+%22below%22,+%22thumbstripRelativeTo%22%3A+%22image%22,+%22thumbstripSize%22%3A+%22280%22,+%22slideshowRepeat%22%3A+true,+%22htmlControlsLayout%22%3A+%22icon-text%22,+%22useTitleBar%22%3A+false,+%22htmlHeadingSource%22%3A+%22a.title%22%7D

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

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

http://highslide.com/editor/

本文固定链接:http://www.hhtjim.com/wordpress-integration-highslide-js-light-box.html
Matrix
本文章由 Matrix 于2013年09月25日发布在wordpress建站, 兼容并蓄, 码字型分类下,目前没有通告,你可以至底部留下评论。
转载请注明:WordPress整合Highslide JS 灯箱效果-HHTjim'S 部落格
关键字:, , ,

有2 条评论 »

  1. 忆次元 忆次元 2014-8-8 19:35:58 +0800#1

    $HSClose = <<<EOT 这局是不是有问题 😐

    • Matrix Matrix Moderator 2014-8-9 11:54:04 +0800

      没问题的,这是php的标记符,EOT可以任意命名,但结尾处必须要对应。

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!