给Tint主题添加FANCYBOX图片灯箱效果

 

本站也在搭建,点击图片即可查看演示。

1、下载FancyBox插件包: https://github.com/fancyapps/fancybox/archive/master.zip
2、将zip压缩包解压,上传至Tint主题目录下的assets文件中,比如阿柳云的地址是/wwwmy/www.aliuyun.cn/wp-content/themes/Tint/assets,即将文件上传至tint/assets下即可,如果上传正确,那么应该是这样的/wwwmy/www.aliuyun.cn/wp-content/themes/Tint/assets/fancybox-master

3、编辑当前主题的footer.php文件,在</header>上面添加以引用代码: 【已更改,无需添加】

4、在function.php文件中加入以下代码确保正确引入JS和CSS文件

defined( 'ALIUYUN_STYLE' ) || define( 'ALIUYUN_STYLE', get_template_directory_uri() . '/assets' );

//加入footer
function aliuyun_add_to_footer(){
	?>
<script type="text/javascript">
$(document).ready(function() {	
	$(".fancybox").fancybox();
});
</script>
<?php 
}
add_action('wp_footer', 'aliuyun_add_to_footer',99);

function aliuyun_style_css_js() {
	//图片灯箱效果
	wp_enqueue_script( 'aliuyunFANCYBOXjs', ALIUYUN_STYLE . '/fancybox-master/dist/jquery.fancybox.min.js', !1, '1.0', !0 );
	wp_register_style( 'FANCYBOXcss', ALIUYUN_STYLE . '/fancybox-master/dist/jquery.fancybox.min.css', array(), '', 'all' );
	wp_enqueue_style( 'FANCYBOXcss' );
	
}
add_action( 'wp_enqueue_scripts', 'aliuyun_style_css_js' );

修改func.Content.php文件,将原来的替换即可。

/**
 * 处理文章内容图片链接以支持lightbox.
 *
 * @since 2.0.0
 *
 * @param string $content
 *
 * @return string
 */
/*function tt_filter_content_for_lightbox($content)
{
    $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="lightbox-gallery" data-lightbox="postContentImages" $6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);

    return $content;
}
add_filter('the_content', 'tt_filter_content_for_lightbox', 98);*/

// 文章图片加灯箱  fancybox
//<a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
function aliuyun_add_lightbox_gall_replacel0 ($content){
	//global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
	$replacement = '$7';
	$content = preg_replace($pattern, $replacement, $content);
        
    return $content;
}
add_filter('the_content', 'aliuyun_add_lightbox_gall_replacel0', 98);

function aliuyun_add_lightbox_gall_replacel1 ($content){
	global $post;
	$pattern2 = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)\>/i";
    $replacement2 = '<a href=$2$3.$4$5 data-fancybox="postimg-'.$post->ID.'" class="fancybox-img"><img$1src=$2$3.$4$5 $6></a>';
	$content = preg_replace($pattern2, $replacement2, $content);
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)><img(.*?)alt=('|\")(.*?)('|\")(.*?)\><\/a>/i";
	$replacement = '<a$1href="$3.$4" data-caption="$9" $6><img$7alt="$9" $11 /></a>';
	$content = preg_replace($pattern, $replacement, $content);
    return $content;
}
add_filter('the_content', 'aliuyun_add_lightbox_gall_replacel1', 99);


function aliuyun_add_lightbox_gall_replacel_comment ($content){
	global $comment;
	if(is_array($comment) && !empty($comment) ){
	if($comment->ID){
		$pattern2 = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)\>/i";
		$replacement2 = '<a href=$2$3.$4$5 data-fancybox="postimg-'.$comment->ID.'" class="fancybox-img"><img$1src=$2$3.$4$5 $6></a>';
		$content = preg_replace($pattern2, $replacement2, $content);
		$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|\")(.*?)><img(.*?)alt=('|\")(.*?)('|\")(.*?)\><\/a>/i";
		$replacement = '<a$1href="$3.$4" data-caption="$9" $6><img$7alt="$9" $11 /></a>';
		$content = preg_replace($pattern, $replacement, $content);
	}
	}
    return $content;
}
add_filter('get_comment_text','aliuyun_add_lightbox_gall_replacel_comment',96);
//还有什么问题吗?欢迎在此交流。
49.30% (35) 次Baidu访问
30.99% (22) 次Google访问
8.45% (6) 次Sogou访问
5.63% (4) 次bingbot访问
5.63% (4) 次sm访问
  • 蜘蛛:Baidu,35次,更新时间:2019-05-22 23:07:31
  • 蜘蛛:Google,22次,更新时间:2019-05-16 16:41:01
  • 蜘蛛:Sogou,6次,更新时间:2019-05-23 15:30:52
  • 蜘蛛:bingbot,4次,更新时间:2019-04-22 19:11:22
  • 蜘蛛:sm,4次,更新时间:2019-05-14 19:03:25

参与评论