How to zoom in on plots inside an Rmarkdown presen

Question

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.

Answer 1

I assume that your question is mainly about how you could zoom in on some tiny plots. Here is a solution using jQuery:

---

We basically add a div container with an img element inside to our slides. Afterwards we integrate onClick functionalities to both, all the plots (aka img elements) and the image with class zoomImg. If you are clicking on a plot, it will be displayed inside our container and if you click on that container, it will vanish again. Here's the code:

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

This will result in the following presentation:

No click:

Click on first plot:

To make this work for a normal HTML document, change

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

to

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