首页
学习
活动
专区
圈层
工具
发布

基于 gulp 的 fancybox 源码压缩

前不久,处理生信分析网页版自动化报告的时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp...引入 jQuery 和 fancybox 样式文件 jquery@3.4.1/dist/jquery.min.js">...当然,我们可以直接修改样式也可以达到显示和隐藏滚动条的目的;或者可以在 fancybox3 的源码中设置 hideScrollbar 选项为 false,就可以出现滚动条了。...fancybox/dist/jquery.fancybox.js 源码中把 hideScrollbar: true,更改成 hideScrollbar: false,然后把修改后的 jquery.fancybox.js...细心的童鞋可能发现了,fancybox 默认使用的 js 文件是 jquery.fancybox.min.js ,相比源码文件 jquery.fancybox.js  多了一个 min 后缀!

1.6K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Hexo的安装及重置恢复

    写在前面 Hexo博客已经使用挺长时间了,其出色的静态网页渲染能力深得我的喜欢,然鹅也是因为 Hexo 基本完全依赖渲染模板的原因,如果在整博客的过程中引入了错误的代码段或者和已有代码发生了冲突,会直接影响博客的正常渲染...: fancybox/helpers/jquery.fancybox-buttons.js INFO Generated: fancybox/helpers/jquery.fancybox-media.js...主题部分(初始化/重置) Hexo模块化的结构和生成流程决定了Hexo本身和主题theme是分离的,或者说耦合性不大,如果博客的主题在先使用过程中出现了一些无法修改的问题,那么就需要重置一下主题,比如我是用的...再次提醒,大部分错误都是theme中的错误导致的,在替换时只需要修改blog目录中的theme文件夹,替换其中的主题即可,blog根目录的东西一般不会出毛病(一般自定义时都是修改主题内的文件)。...indigo中将一些基本文件替换到新的indigo中 indigo\ _config.yaml (注意是indigo目录下的配置文件) indigo\source (全部内容,除了js和css,这两部分可能包含先前的错误

    2.9K20

    web 汇总

    front-end html HTML+CSS oblique 和 intalic 的区别 这两个都是font-style属性的值,这两个值都能实现倾斜的效果,但是有区别的。...javascript keydown 和 keypress keydown:按下键盘键 keypress:紧接着keydown事件触发(只有按下字符键时触发) 如果用户按下了一个字符键不放,就会重复触发...详解键盘事件 (keydown,keypress,keyup) textContent、innerText 和 innerHTML 的区别 设置标签中的文本内容,应该使用textContent或innerText...(注意防止 XSS 注入) 如果某个属性在浏览器中不支持,那么这个属性的类型是undefined,判断这个属性的类型是不是undefined,就知道浏览器是否支持。...github 介绍 fancybox 源 1 2 fancybox/3.5.7/jquery.fancybox.min.css"

    2.7K20

    纯代码给你的网站增加图片灯箱效果,增强落地页体验

    灯箱效果是我一直想加又没有加的功能,正好最近百度在推移动落地页检测,顺手做一下优化 我的检测结果是:您的页面可能存在图片不可全屏查看,全屏查看后不可缩放/左右滑动的问题,影响落地页体验 我们可以直接使用...FancyBox来完成我们的需求,FancyBox是一款优秀的弹出框Jquery插件 1、允许我们用鼠标和键盘上的四个方向键切换图片 2、可以根据当前窗口大小自动调整弹出框的大小,当我们改变浏览器窗口大小时...1、引入相关文件 可以将FancyBox的 js、css 文件下载到主题目录中进行引入,这里我们直接使用 CDN 外链 请先在header.php文件的标签前引入Jquery文件 <script type...】→【上传图片或媒体库】→选中图片→点击【插入至文章】之前,选择【附件显示设置】链接到【媒体文件】 需要将以下代码添加到当前主题的functions.php文件中 // fancybox3 图片添加 data-fancybox...或footer.php文件中 3.初始化 fancybox 一切加载完成后,就可以初始化FancyBox了,在刚才引入的FancyBox的 js、css 文件下面增加 $(document).ready

    7.5K40

    基于 gulp 的 fancybox 源码压缩

    前不久,处理生信分析的网页版自动化报告时候就使用过 fancybox,今天在优化个人博客,为博文增加图片缩放效果,解决一些滚动条问题时,才从 fancybox 的 Github 源码中接触到 gulp...引入 jQuery 和 fancybox 样式文件 jquery@3.4.1/dist/jquery.min.js">...当然,我们可以直接修改样式也可以达到显示和隐藏滚动条的目的;或者可以在 fancybox3 的源码中设置 hideScrollbar 选项为 false,就可以出现滚动条了。...,我们可以直接在fancybox/dist/jquery.fancybox.js源码中把hideScrollbar: true,更改成hideScrollbar: false,然后把修改后的jquery.fancybox.js...细心的童鞋可能发现了,fancybox 默认使用的 js 文件是jquery.fancybox.min.js,相比源码文件jquery.fancybox.js 多了一个 min 后缀!

    1.5K10

    Kali Linux Web渗透测试手册(第二版) - 3.10 - 从爬行结果中识别相关文件和目录

    、WebScarab的使用 3.10、从爬行结果中识别相关文件和目录 ---- 3.10、从爬行结果中识别相关文件和目录 我们已经抓取了一个完整的web应用程序目录,并且有了所有引用文件的列表及其路径...我们要寻找的第一件事是登录页面和注册页面,这些可以让我们有机会成为应用程序的合法用户或通过猜测用户名和密码来冒充一个人。...应用程序的测试和开发版本通常受到的保护较少,而且相比于最终版本更容易发现漏洞,因此它们是我们搜索弱点的一个很好的目标。...原理剖析 上面列出的一些目录可能允许我们访问站点的受限部分,这是渗透测试中非常重要的一步; 如果忽略它们的存在,我们就无法找到这些地方的漏洞。...其中一些将为我们提供有关服务器的配置信息,以及使用的开发框架。 其他一些如Tomcat管理器和JBoss管理页面,如果配置错误,将有可能被恶意用户直接拿下Web服务器的权限。

    1K30

    jQuery 图片播放插件 FancyBox 和其 WordPress 插件

    什么是 FancyBox FancyBox 是一个 jQuery 图片播放插件,它可以使用类似于 MAC 系统中 “Lightbox” 方式在网页前面浮动显示和播放图片,网页内容,或者其他多媒体内容。...FancyBox 的特性 支持图片,HTML 元素,Flash 动画,Iframe 以及 AJAX 支持。 可以自定义播放器和 CSS 样式。 可以以组的形式进行轮转播放。....bmp/.gif/.png) 和 Falsh 动画文件 (.swf) 自动获取 FancyBox 的弹出效果。...Fancy Gallery Fancy Gallery 整合 FancyBox 到你的 WordPress 博客中,同样,所有指向图片的链接都会自动使用 FancyBox 的方式弹出页面的上面,如果你使用...FancyBox Gallery FancyBox Gallery 把 FancyBox 这个 jQuery 插件集成到 WordPress 的 Gallery 功能中,你只需要在日志内容中试用 Gallery

    3.1K20

    Hexo 搭建静态博客

    themes/landscape 默认的皮肤 _config.yml 全局的配置文件 备注: 我们每次用到的就是_posts目录里的文件,而_config.yml文件和themes目录是第一次配置好就行了...文章标题,文章类型,外部链接等 目录和标签 默认分类,分类图,标签图 归档设置 归档的类型 服务器设置 IP,访问端口,日志输出 时间和日期格式 时间显示格式,日期显示格式 分页设置 每页显示数量 评论.../helpers/jquery.fancybox-buttons.js INFO Generated: fancybox/helpers/jquery.fancybox-media.js INFO...Generated: fancybox/helpers/jquery.fancybox-thumbs.css INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css...在github项目中,新建一个文件CNAME,文件中写出你要绑定的域名sjf0115.club。通过浏览器,访问http://sjf0115.club , 就打开了我们建好的博客站点: ?

    1K30

    ASP.NET MVC5+EF6+EasyUI 后台管理系统(56)-插件---单文件上传与easyui使用fancybox

    今天整合lightbox插件Fancybox1.3.4,发现1.3.4版本太老了。而目前easyui 1.4.x的jquery的版本已经到达1.11.x以上。...本以为不能再使用这个插件,但是发现还是有人重写了插件的方法让其支持jquery 1.11.x以上,最上面是下载地址。...不过有收费插件fancybox2.0,本身支持高版本的jquery,大家可以使用 使用fancybox非常简单。解压包下的index基本有所有例子 ? 直接运行结果: ? 显示非常动感。  ...这段代码来源于fancybox插件的第一个样例代码。...如果你的记录支持多张图片。那么必须再新建一张图片子表来关联。 然后用到样例中的:多张显示 ?

    2.1K70

    Fancybox图片灯箱效果实现

    Fancybox是一款基于jquery开发的类Lightbox插件,同时也是一款很绚丽的 jquery 弹出层展示插件,支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。...Fancybox 可以节省您的时间并帮助您轻松创建包含图像、iframe、视频或任何类型的 HTML 内容的漂亮、现代的叠加窗口。...,以所有的img属性作为选项设置特定于图像的自定义选项,处理预加载,光标样式,单击,双击和滚轮事件,放大/缩小动画。...默认:can-zoom_out zoom {Boolean} 在启动或关闭fancybox 时从缩略图中缩放动画。...支持 Fancybox包含的插件提供了额外的媒体类型支持:图像,用于内嵌内容、iframe、视频(HTML5、Youtube 和 Vimeo)、Google 地图和 Ajax 的 HTML 。

    3.5K20

    github pages + Hexo + 域名绑定搭建个人博客增强版

    概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进行优化和完善。...,然后创建站点,在 domain 中填入你设定的域名前半部分 # http://的部分>.duoshuo.com (domain只填上里的内容,不要填整个网址) youyan: on...友言服务在 Web 环境下运行,普通本地环境无法查看,请部署后在线上测试。.../fancybox/2.1.5/jquery.fancybox.min.js fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css...想要在文章中插入图片的话,可以按照Markdown语法来插入,图片的存放有两种方式:在本地D:\Hexo\source目录下新建一个存放图片的文件夹,比如images,然后把想要插入的图片放在里面插入图片的路径

    1.9K80

    闪电加载:博客性能优化全攻略

    巴索罗缪·大熊 前言 这些年积累了很多前端性能优化的知识点和思路,日常工作很少涉及技术层极限优化,近期终于一点点把博客独立搭建并部署了,对之前的一些技术点进行了深度探索,最终结果也达到了预期效果,由于水平有限...gzip 模块的其他参数可以根据需要进行配置,以优化 Nginx 的 gzip 压缩功能 测试结果 添加 gzip 后的 完成 参数需要 3.03 秒 执行 5 次取平均值,最终结果为 3.02 秒...landscape 主题下的 _config.yml 中的 fancybox 设置为 false,同时删除 source 目录下的 fancybox 相关文件 图片压缩 首页背景图压缩 具体操作方式为把...,分析 jquery 文件的使用场景,结合页面功能和代码引入,只有在 script.js 中用了 分析目前页面上用到的功能,只有 script.js 中只有一个分享按钮代码有用,而且效果还不太好,把整个...js 文件不用的功能代码删掉,后面需要什么功能单独加代码 把分享功能先去掉,这个功能没有配置选项,在 article.ejs 中把 footer 标签注释掉就行了,这时候 jquery 引入代码也注释掉

    58510
    领券