如何放大Rmarkdown演示文稿中的地块

我正在用rmarkdown（ioslides）创建我的第一个HTML演示文稿，并希望能够手动放大幻灯片并导航到对象。
缩放在浏览器中正常工作（crtl +，crtl鼠标滚轮），但我无法移动幻灯片。无论是鼠标还是滚动条。后者不会像他们做的那样出现在网站上。
有没有适当的方式来实现这样的事情，或者ioslides不打算这样使用？如何放大Rmarkdown演示文稿中的地块

我使用Ubuntu 16.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") 
```

这也是第一次，我没有找到计算器的答案，必然我的第一个条目。

来源

2016-11-03 Robert Hering

你需要滚动还是这只是关于放大的情节？ –

我认为实现缩放后滚动的可能性会更容易。但jQuery工作正常，甚至是更好的解决方案！非常感谢。 –

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

我们基本上以img元素添加div容器内，以我们的幻灯片。之后，我们将onClick功能集成到了所有的地块（别名img元素）以及类别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") 
```

这将导致下面的介绍：

没有点击：

点击第一条曲线：

来源

2016-11-03 21:40:16

我也加了'max-height：100％; 溢出：scroll;'参数到'.zoomDiv'，现在它对于高尺寸图像也是完美的。非常感谢你！ –

不客气。我将在我的答案中包含您的修改。 –

如何放大Rmarkdown演示文稿中的地块

回答

相关问题