Jekyll添加FancyBox 插件
一、简要
- 这是之前在GitHub Page上面使用博客功能的完善,之前每次传到GitHub上面的图片在博客里面都是显示压缩后的,导致很多代码细节都看不清。
- Markdown 语法中的图片我们一般是如此写法:
![tag](url "name")
- 生成的 html 为
<image title="name" alt="name" src="url">
- 我们如果要使用 FancyBox 的话,则需要如下的链接才可
<a href="url" id="id">
<img src="url">
</a>
二、下载使用
FancyBox
具体用法见http://fancyapps.com/fancybox/- 首先下载 FancyBox ,解压到你的主题文件夹,譬如我的是
theme/fancybox
下; - 编辑
_includes
文件夹中模板文件,在head.html
中添加:
<link href="/theme/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" media="all" />
- 在
footer.html
中添加:
<script src="/theme/fancybox/lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="/theme/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script>
// 给图片添加链接
$(document).ready(function() {
$("p img").each(function() {
var strA = "<a id='yourid' href='" + this.src + "'></a>";
$(this).wrapAll(strA);
});
}); // fancybox
$("#yourid").fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
});
</script>
- 将代码提交上去,重新打开你的博客,点击图片,就会出现以下效果
好吧,原来博客园的图片也不能放大…压缩真的很头疼,直接影响博客质量。
if ( U.read(me.Blog) ) $("#推荐").click();
if ( U.copy(me.Blog) ) $("#u Blog").console("原文链接:http://www.cnblogs.com/Grand-Jon/p/7397652.html ");
else me.Fuck(U);
Jekyll添加FancyBox 插件的更多相关文章
- 给jekyll博客添加天气插件
layout: post title: 给博客添加天气插件 date: 2020-04-26 author: Dapenson header-img: img/post-bg-debug.png ca ...
- jQuery Fancybox插件介绍
下面介绍一款jquery图片播放插件叫Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点如下: 1.可以支持图片.html文本.flash动画.ifram ...
- jQuery Fancybox插件使用参数详解
Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse whee ...
- Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flas
转自Ubuntu 14.04安装Chromium浏览器并添加Flash插件Pepper Flash Player Chromium谷歌的开源浏览器将不再支持Netscape浏览器插件API,Adobe ...
- Emacs添加主题插件(Win系统)
Emacs添加主题插件(Win系统) */--> /* @licstart The following is the entire license notice for the JavaScri ...
- jQuery Fancybox插件说明
这里有jquery影像回放路径插件称为Fancybox,项目主页地址:http://fancybox.net/ Fancybox的特点例如以下: 1.能够支持图片.html文本.flash动画.ifr ...
- IntelliJ IDEA 添加junit插件
一.使用idea做junit测试需要添加junit插件 1.安装插件 File-->settings-->Plguins-->Browse repositories-->输入J ...
- atitit.MyEclipse10 中添加svn插件故障排除
atitit.MyEclipse10 中添加svn插件故障排除 删除\configuration \org.eclipse.update 不行... 二. 在configuration下的config ...
- JFinal 添加Druid插件
第一步:添加依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</a ...
随机推荐
- Jmeter 跨线程组传递参数 之两种方法(转)
终于搞定了Jmeter跨线程组之间传递参数,这样就不用每次发送请求B之前,都需要同时发送一下登录接口(因为同一个线程组下的请求是同时发送的),只需要发送一次登录请求,请求B直接用登录请求的参数即可,直 ...
- 安卓版 WPS 使用电脑字体、安卓版 WPS 添加字体、安卓 WPS 无法显示文档真实字体(24)
1. 前言 安卓版WPS默认只有那么几种字体,查看电脑的Office文档无法显示文档的真实字体.想要用更多的字体需要开会员,这里提供免费方案. 2. 操作步骤 1.先在手机中打开一个要查看的文档: 2 ...
- day0~day13
day0 day1 day2 day4 day5 day7 day9 day10 day12 day13
- PHP和Memcached - Memcached的安装
1.现有扩展对比 memcache memcached 实现方式 原生 局域libmemcached的类库,性能高 编程方式 面向过程.对象 面向对象 CAS命令 NO YES php7 NO Y ...
- python — 表的操作(二)
目录 1.单表查询 2. 多表查询 1.单表查询 单表查询语法: select distinct 字段1,字段2... from 表名 where 条件 group by field having 筛 ...
- sql注入测试(2)---实例测试
以下篇幅,用一个简单的实例说明如何进行测试. 功能:根据用户NAME删除用户,采用的是SQL拼接的方式,核心代码部分如下: public static void deleteByName(String ...
- gitea configure
gitea configure app.ini APP_NAME = Gitea: Git with a cup of tea RUN_USER = LSGX RUN_MODE = prod [oau ...
- MongoDB知识小结
一.术语 RDBMS MongoDB 数据库 数据库 表格 集合 行 文档 列 字段 表联合 嵌套文档 主键 主键 (MongoDB 提供了 key 为 _id ) 数据库 数据库名可以是满足以下条件 ...
- webpack最基本的使用方式
1.创建文件夹"webpack-study" 2.使用webstrom打开文件夹所在位置.在根目录上创建一个文件,文件命名为“src”,在src文件下新建css.images.js ...
- JQuery的事件处理、Jason
事件的处理: <body> <div id="aa" style="width:100px; height:100px; background-colo ...