Jquery 如何放大Rmarkdown演示文稿中的绘图

我正在使用rmarkdown（iSlides）创建我的第一个HTML演示文稿，希望能够手动放大幻灯片并导航到对象。
在浏览器（crtl+，crtl鼠标滚轮）中缩放效果很好，但我无法移动幻灯片。既不使用鼠标也不使用滚动条。后者不像在网站上那样出现。
有没有合适的方法来实现这样的事情，或者ioslides不打算这样使用

我正在使用Ubuntu16.04（LXDE）和rstudio（R版本3.2.3）。我尝试在Firefox和Chromium中缩放和导航

例如：

---
title: Zooming into an ioslide
author: "Robatt"
output: 
 ioslides_presentation: 
 fig_caption: yes
---

```{r setup, include=FALSE}
 knitr::opts_chunk$set(echo = FALSE)
```
##The slide to zoom in and navigate

```{r fig.align='left', out.width = "100px", dpi=300, 
fig.cap="a small graph to zoom in, when necessary"}
library(ggplot2)
x=c(1:30,by=0.1)
y=x/(1+x)
ggplot()+
  geom_smooth(aes(x=x,y=y),se=F,span=0.15,color="grey20")+
  labs(x="you can only read me after zooming in")
```

这也是我第一次没有找到关于stackoverflow的答案，也就是我的第一个条目。

我想你的问题主要是关于如何放大一些小情节。下面是一个使用jQuery的解决方案：

---

我们基本上在幻灯片中添加了一个

div

容器，其中包含

img

元素。之后，我们将onClick功能集成到所有绘图（aka

img

元素）和带有class

zoomImg

的图像中。如果您单击一个绘图，它将显示在我们的容器中，如果您单击该容器，它将再次消失。代码如下：

---
title: Zoom in on Plots
author: "MS"
output: 
 ioslides_presentation: 
   fig_caption: yes
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>
.zoomDiv {
  opacity: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  z-index: 50;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 50px #888888;
  max-height:100%; 
  overflow: scroll;
}

.zoomImg {
  width: 100%;
}
</style>


<script type="text/javascript">
  $(document).ready(function() {
    $('slides').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");
    // onClick function for all plots (img's)
    $('img:not(.zoomImg)').click(function() {
      $('.zoomImg').attr('src', $(this).attr('src'));
      $('.zoomDiv').css({opacity: '1', width: '60%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'});
    });
  });
</script>

## First Slide

```{r fig.align='left', out.width = "100px", dpi=300, fig.cap="tiny"}
plot(mtcars$cyl, main = "Plot 1")
``` 

```{r fig.align='left', out.width = "100px", dpi=300, fig.cap="tiny"}
plot(mtcars$mpg, main = "Plot 2")
``` 

---
标题：放大绘图
作者：“MS”
输出：
ioslides_演示文稿：
图片说明：是的
---
```{r设置，include=FALSE}
knitr:：opts_chunk$set（echo=FALSE）
```
zoomDiv先生{
不透明度：0；
位置：绝对位置；
最高：50%；
左：50%；
z指数：50；
转换：翻译（-50%，-50%）；
盒影：0px 0px 50px#8888888；
最大高度：100%；
溢出：滚动；
}
.zoomImg{
宽度：100%；
}
$（文档）.ready（函数（）{
$（“幻灯片”）。前置（“”）；
//所有绘图的onClick函数（img）
$（'img:not（.zoomImg'）。单击（函数（）{
$（'.zoomImg'）.attr（'src'，$（this.attr（'src'））；
$（'.zoomDiv'）.css（{opacity:'1'，width:'60%}）；
});
//zoomImg的onClick函数
$（'img.zoomImg'）。单击（函数（）{
$（'.zoomDiv'）.css（{opacity:'0'，width:'0%}）；
});
});
##第一张幻灯片
```{r fig.align='left'，out.width=“100px”，dpi=300，fig.cap=“tiny”}
绘图（mtcars$cyl，main=“绘图1”）
``` 
```{r fig.align='left'，out.width=“100px”，dpi=300，fig.cap=“tiny”}
地块（mtcars$mpg，main=“地块2”）
``` 

这将导致以下演示：

无点击：

单击第一个绘图：

要使其适用于普通HTML文档，请更改

$('slides').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");

$（'slides'）。前置（“”）；

到

$（'body'）。前缀（“”）；

您需要滚动还是这只是为了放大绘图？我想在放大后实现滚动可能会更容易。但是jQuery工作得很好，甚至是更好的解决方案！非常感谢。我还添加了

最大高度：100%；溢出：滚动参数添加到
.zoomDiv
中，现在它也非常适用于大尺寸图像。非常感谢你！不客气。我将在我的答案中包含您的修改。我可以将该脚本复制到任何rmarkdown html文档中吗，或者我必须在以后的r块中添加一些内容吗？我复制了脚本并将“out.width=“100px”，dpi=300，“添加到我的r块中，但这只会使我的r块中的ggplot非常小。。。我不能点击它，因为你正在生成一个简单的HTML文档？因为在一个普通的
HTML\u文档中，
$（'slides'）行没有
slides
元素必须更改为
$（'body'）。前缀（“”）
$('body').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");