B2主题文章图片点击放大灯箱原理分析

先弄明白B2的灯箱代码用的是什么JS特效,我们找到目录下 main.js (这个文件包含了所有b2需要初始化的js信息),一打开我们就可以看到这行代码

var b2zoom = new Zooming(….)

那我们简单搜索一下就可以知道,以下这些信息:

Zooming 是一款纯 javascript 图片缩放库,主要特点有:

  • 不依赖其他库,纯 JavaScript 实现,支持移动设备;
  • 流畅的动画;
  • 可缩放高清图像;
  • 易于集成和定制。

简单来说,除了b2使用的scaleBase,scaleExtra,customSize这些属性,你还可以使用一些事件比如onOpen,onClose,onRelease,onBeforeOpen等等…

查看演示

如果你发现自己原有文章的图片,无法放大到合适比例,或者图片太小,建议检查下面的设置。

1、B2后台模块管理->文章内页->是否使用主题自带文章内图片点击放大功能->开启;

2、确保文章图片->尺寸->完整尺寸;

3、图片->链接到->无 ;

4、2-3步骤可直接用代码代替:

add_action( ‘after_setup_theme’, ‘default_attachment_display_settings’ );
function default_attachment_display_settings() {
//update_option( ‘image_default_align’, ‘left’ );
update_option( ‘image_default_link_type’, ‘none’ );
update_option( ‘image_default_size’, ‘full’ );
}

 

 

人已赞赏
二次开发

WordPress插件DPlayer支持m3u8视频HTML5播放

2019-6-1 13:45:11

二次开发

B2主题专题滚动特效原理解析

2020-8-20 14:01:58

免责声明本文中提到的资源均来自于互联网,仅供个人学习交流,若您喜欢本文可附上原文链接随意转载。
版权人申诉:我要申诉
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索