Skip to content

Instantly share code, notes, and snippets.

@badbye
Created March 22, 2019 08:55
Show Gist options
  • Save badbye/30a04c2f8fd96eff7277b44c5057b23a to your computer and use it in GitHub Desktop.
Save badbye/30a04c2f8fd96eff7277b44c5057b23a to your computer and use it in GitHub Desktop.
为xaringan的图片添加zoom效果
<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>
---
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)
]
@badbye
Copy link
Author

badbye commented Mar 22, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment