所謂的暗箱，就是點(diǎn)擊小圖片彈出窗口并顯示大圖片，類似的Wordpress插件眾多，比如：wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js，加上我之前用的Auto Highslide等等，功能效果都相似。其實(shí)不用插件簡單幾步就可將這一特效集成到Wordpress主題中，而且加載的文件也比插件小的多。喜歡折騰的童鞋可以參照下面的方法操作：
首先，下載所需文件，解壓后將pirobox文件夾內(nèi)的所有文件放到你所使用主題的目錄中。
其次，打開主題header模版文件，在</head>前面，分別添加：
所需樣式：
- <link?rel="stylesheet"?href="<?php?bloginfo('template_url');??>/img/style.css"?/>??
必須的jquery.min.js及特效pirobox.min.js文件:
- <script?type="text/javascript"?src="<?php?bloginfo('stylesheet_directory');??>/js/jquery.min.js"?></script> ??
- <script?type="text/javascript"?src="<?php?bloginfo('template_directory');??>/js/pirobox.min.js"></script> ??
- <script?type="text/javascript"> ??
- $(document).ready(function()?{ ??
- ????$().piroBox({ ??
- ????????????my_speed:?400,?//animation?speed ??
- ????????????bg_alpha:?0.3,?//background?opacity ??
- ????????????slideShow?:?true,?//?true?==?slideshow?on,?false?==?slideshow?off ??
- ????????????slideSpeed?:?4,?//slideshow?duration?in?seconds(3?to?6?Recommended) ??
- ????????????close_all?:?'.piro_close,.piro_overlay'//?add?class?.piro_overlay(with?comma)if?you?want?overlay?click?close?piroBox ??
- ????}); ??
- }); ??
- </script>??
如果你所使用的主題已加載了jquery.js，可以免去jquery.min.js文件加載代碼。
最后，集成該特效除了加載必須的JS和樣式文件，關(guān)鍵是為日志中的圖片鏈接自動添加JS特效所需的固定標(biāo)簽屬性（class="pirobox_gall"）。將下面代碼扔到主題functions.php中：
- //自動添加標(biāo)簽屬性
- add_filter('the_content',?'pirobox_gall_replace'); ??
- function?pirobox_gall_replace?($content) ??
- {???global?$post; ??
- ????$pattern?=?"/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i"; ??
- ????$replacement?=?'<a$1href=$2$3.$4$5?class="pirobox_gall"$6>$7</a>'; ??
- ????$content?=?preg_replace($pattern,?$replacement,?$content); ??
- ????return?$content; ??
- }??
完成暗箱特效集成，簡單吧。之后，點(diǎn)擊日志中的圖片，就會華麗地彈出窗口展示該日志中所有插入的圖片，可手動播放也可以自動播放。另外下面是無圖演示:
另外，集成該插件后，如果日志中有多張圖片，只需正常插入一張就可以了，其它只需插入圖片鏈接，可以加快頁面打開速度。
舉一反三，你也可以嘗試將http://www.pirolab.it/pirobox/中的特效集成到主題中，這個(gè)JS特效彈出窗口，可適應(yīng)屏幕的大小，并可移動，關(guān)鍵就是為圖片鏈接添加不同的標(biāo)簽屬性。
3F
技術(shù)帝
2F
不錯(cuò)，講的很好，效果杠杠的！！
1F
wp很強(qiáng)大，我得學(xué)習(xí)學(xué)習(xí)，以便優(yōu)化一下
B1
@ 微歷史 應(yīng)該說Jquery強(qiáng)大了，放在啥程序上都可以有這效果的麻。