为xaringan的图片添加zoom效果

header.js

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.21/jquery.zoom.min.js'></script>

<script>
(function () {
  $('.hover_large img')
    .wrap('<span style="display:inline-block"></span>')
    .css('display', 'block')
    .parent()
    .zoom();
})();
</script>

index.Rmd

---
title: "幻灯忍者"
subtitle: "写轮眼"
author: "谢益辉"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: [default, zh-CN.css, header.css]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    includes:
      after_body: header.js
---

关键是`after_body: header.js` 这一行。

---
## Zoom-Pic

给图片添加一个`hover_large`的class属性。就有zoom的效果了。

.hover_large[
  ![Sharingan](http://res.cloudinary.com/active-bridge/image/upload/slide1.jpg)
]

将 header.js 文件放置在 index.Rmd 所在的目录里。