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);

转载于:https://www.cnblogs.com/Grand-Jon/p/7397652.html

Jekyll添加FancyBox 插件相关推荐

fancybox ajax参数,jQuery Fancybox插件使用参数详解
今天给大家介绍的jquery图片播放插件叫Fancybox,相比LightBox来说,Fancybox相对庞大点,配置也更丰富一些,相信你会喜欢的. Fancybox的项目主页地址:http://fa ...
myecplise 添加svn插件
myecplise 添加svn插件 myecplise svn插件下载地址 http://subclipse.tigris.org/servlets/ProjectDocumentList?folde ...
jquery Fancybox插件的应用
Fancybox是一款基于jquery的对图片展示播放的插件,当然,它html文本.flash动画.iframe以及ajax也予以支持.还可以通过css自定义外观,阴影效果超级赞! 演示效果:http ...
添加tomcat7插件设置jdk编译版本
设置jdk编译版本使用jdk1.8,需要设置编译版本为1.8,这里需要使用maven的插件来设置: 在pom.xml中加入: <plugin><groupId>org.apa ...
自定义notebook扩展插件_Anaconda3中的Jupyter notebook添加扩展插件
学习python和人工智能的相关课程时安装了Anaconda3,想在Jupyter notebook中归纳整理笔记,为了方便日后查找想安装目录(Table of Contents, TOC)插件,查找 ...
Ubuntu 15 安装Chromium浏览器并添加Flash插件Pepper Flash Player
Chromium谷歌的开源浏览器将不再支持Netscape浏览器插件API,Adobe公司的Flash将无法正常工作了.然而用户可以使用Pepper Flash Player,这是谷歌浏览器上一款替代 ...
Ubuntu 16.04 火狐添加java插件、解决Firefox强制低版本java插件运行以及安全设置限制自签名应用程序运行
1.火狐添加java 插件我的jdk是1.7版本在/home/lzhprogram/java目录火狐插件文件夹在/usr/user/mozija/plugins 使用如下软链接即可给火狐添加插件 ...
maven添加tomcat插件
由于maven添加tomcat插件有效的解决了没有本地服务器的囧态,有必要学一下---也可以用来装X嘛 pom.xml添加如下代码 <build><plugins><!- ...
mac添加Chrome插件的方法
mac添加Chrome插件的方法如果是.crx的插件更改后缀crx为zip 后续步骤同下文.zip文件如果是.zip的插件使用终端进行解压注意不要用解压工具解压,一定要用终端,命令行解压 / ...

Jekyll添加FancyBox 插件

一、简要

二、下载使用

好吧，原来博客园的图片也不能放大…压缩真的很头疼，直接影响博客质量。

Jekyll添加FancyBox 插件相关推荐

最新文章

热门文章