4

I am creating my first HTML - presentation with rmarkdown (ioslides) and would like to be able to manually zoom into a slide and navigate to an object.
Zooming works fine in a browser (crtl +, crtl mouse wheel) but I can not move the slide. Neither with the mouse nor with scrollbars. The latter do not appear as they do e.g. on a website.
Is there an appropriate way to implement such a thing or are ioslides not meant to be used like this?

I am using Ubuntu 16.04 (LXDE) and rstudio (R version 3.2.3). I tried zooming and navigating in Firefox and Chromium.

example:

---
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")
```

This also is the first time that I did not find an answer on stackoverflow and consequentially my first entry.

4

1 回答 1

6

我认为您的问题主要是关于如何放大一些小图。这是使用 jQuery 的解决方案：

我们基本上在幻灯片中添加了一个div容器，img里面有一个元素。之后，我们将 onClick 功能集成到所有绘图（又名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")
```

这将导致以下演示：

无点击：

在此处输入图像描述

点击第一个图：

在此处输入图像描述

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

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

至

$('body').prepend("<div class=\"zoomDiv\"><img src=\"\" class=\"zoomImg\"></div>");
于 2016-11-03T21:40:16.707 回答