首先,在主题header.php的Head标记前引入JQ库、fancybox插件css以及js文件:
<script type="text/javascript" src="https://www.huawenonline.com/js/jquery-1.7.2.min.js"></script> <!-- Add mousewheel plugin (this is optional) --> <script type="text/javascript" src="https://www.huawenonline.com/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script> <!-- Add fancyBox --> <link rel="stylesheet" href="https://www.huawenonline.com/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <script type="text/javascript" src="https://www.huawenonline.com/fancybox/source/jquery.fancybox.js?v=2.1.5"></script> <!-- Optionally add helpers - button, thumbnail and/or media --> <link rel="stylesheet" href="https://www.huawenonline.com/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" /> <script type="text/javascript" src="https://www.huawenonline.com/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <script type="text/javascript" src="https://www.huawenonline.com/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script> <link rel="stylesheet" href="https://www.huawenonline.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> <script type="text/javascript" src="https://www.huawenonline.com/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
紧接着你需要在主题的function.php里添加:
//fancybox 自动对图片链接添加class=fancybox及real=group属性 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 rel="group" class="fancybox"$6>$7</a>'; $content = preg_replace($pattern, $replacement, $content); return $content; }
最后一步,在主题的footer.php body标记前设置fancybox插件参数:
<script type="text/javascript"> $(document).ready(function() { $('.fancybox').fancybox(); $(".fancybox-effects-a").fancybox({ helpers: { title : { type : 'outside' }, overlay : { speedOut : 0 } } }); }); </script>" />