WordPress前端图片灯箱特效有很多插件可以使用，譬如：wp-slimbox2、jQuery Lightbox、jQuery Colorbox、、Gameplorer`s WPColorBox、shadowbox-js等等。但是这些插件大多都不是国人制作，并且后台插件管理过于臃肿，实际使用上体验并不会很好，今天分享一个WordPress免插件添加Fancybox图片灯箱效果的方法，如下：
第一步：下载Fancybox的核心文件jquery.fancybox.min.cssjquery.fancybox.min.js图标素材,这里使用的是2.2.0版本。
第二步：为文章内的图片添加css样式支持fancybox并超链接到原图：
//图片自动链接到原图、增加额外样式
function pirobox_auto($content) {
global $post;
$pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
$replacement = '<a$1href=$2$3$4$5$6 class="fancybox"'.$post->ID.'>';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
add_filter('the_content', 'pirobox_auto', 0);
第三步：添加Fancybox变量文件控制文件另存为Fancybox.js代码如下：
/* <![CDATA[ */
var fb_timeout,fb_opts={"closeBtn":true,"margin":20,"fitToView":true},
easy_fancybox_handler=easy_fancybox_handler||function(){
jQuery('a.fancybox-close').on('click',function(e){e.preventDefault();jQuery.fancybox.close()});
/* IMG */
var fb_IMG_select=jQuery('a[href*=".jpg" i]:not(.nofancybox,li.nofancybox>a),area[href*=".jpg" i]:not(.nofancybox),a[href*=".png" i]:not(.nofancybox,li.nofancybox>a),area[href*=".png" i]:not(.nofancybox),a[href*=".webp" i]:not(.nofancybox,li.nofancybox>a),area[href*=".webp" i]:not(.nofancybox)');
fb_IMG_select.addClass('fancybox').attr('data-fancybox-group','gallery');
jQuery('a.fancybox,area.fancybox,.fancybox>a').fancybox(jQuery.extend(true,{},fb_opts,{"openEffect":"elastic","closeEffect":"elastic","closeClick":false,"arrows":true,"mouseWheel":false,"autoPlay":false,"helpers":{"title":{"type":"over"}},"beforeShow":function(){var alt=this.element.find('img').attr('alt');this.inner.find('img').attr('alt',alt);this.title=this.title||alt;},"loop":false}));};
var easy_fancybox_auto=function(){setTimeout(function(){jQuery('a#fancybox-auto,#fancybox-auto>a').first().trigger('click')},1000);};jQuery(easy_fancybox_handler);jQuery(document).on('post-load',easy_fancybox_handler);
jQuery(easy_fancybox_auto);
/* ]]> */
第四步：在你的网站前端head中引用以上三个文件，注意确认是否先引入了jquery库文件：
<link rel='stylesheet' href='/jquery.fancybox.min.css' type='text/css' media='screen' /> <script type="text/javascript" src="/jquery.fancybox.min.js"></script> <script type="text/javascript" src="/fancybox.js"></script>
总结：以上就可以实现你网站的前端图片灯箱效果了，特效细节可以通过调整css以及fancybox.js文件中的参数来调整，具体全凭个人喜好，希望这篇文章能给你带来帮助！
