FancyBox – 利用FancyBox插件为WordPress图片增加灯箱展示效果 - 任刚 · Ren Gang - 我的设计笔记 世界设计 · 设计世界 如何为WordPress增加图片等箱(LightBox)效果捏?也许你可以参照后面的方法灵活使用FancyBox插件:

首先,在主题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>
" /> LishtBox · 任刚 · Ren Gang - 我的设计笔记

LishtBox    62

FancyBox – 利用FancyBox插件为WordPress图片增加灯箱展示效果

插件      

登 录 注 册