我正在使用rmarkdown(ioslides)创建我的第一个HTML演示文稿,并且希望能够手动缩放到幻灯片并导航到对象。
缩放在浏览器(crtl +,crtl鼠标滚轮)中工作正常,但我无法移动幻灯片。既不用鼠标也不用滚动条。后者并不像他们那样出现,例如在网站上。
是否有适当的方法来实现这样的事情或者ioslides是不是意味着像这样使用?
我正在使用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")
```
这也是我第一次没有在stackoverflow上找到答案,而是第一次在第一次进入。
答案 0 :(得分:4)
我认为你的问题主要是关于如何放大一些微小的情节。这是一个使用jQuery的解决方案:
我们基本上会在幻灯片中添加一个div
容器,其中包含img
元素。然后,我们将onClick功能集成到所有图表(aka 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")
```
这将导致以下演示:
无点击:
点击第一个图:
要使其适用于普通HTML文档,请更改
$('slides').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");
到
$('body').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");