title: Zoom function in rmarkdown html plot
body: <p>Is there a way, like in this SO question <a href="https://stackoverflow.com/questions/40401680/how-to-zoom-in-on-plots-inside-an-rmarkdown-presentation">here</a>, to add zooming functionality to html_documents created with rmarkdown? I work in Rstudio. I have tried the following, but of course, it does not work:</p>
  
  <pre><code>---
  title: Zoom in on Plots
  author: "MS"
  output: html_document
  ---
  
  ```{r setup, include=FALSE}
  knitr::opts_chunk$set(echo = FALSE)
  ```
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  .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%;
  }
  &lt;/style&gt;
  
  
  &lt;script type="text/javascript"&gt;
    $(document).ready(function() {
      $('slides').prepend("&lt;div class=\"zoomDiv\"&gt;&lt;img src=\"\" class=\"zoomImg\"&gt;&lt;/div&gt;");
      // 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%'});
      });
    });
  &lt;/script&gt;
  
  ## 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")
  ``` 
  </code></pre>
  
  <p>I am very new to R-Markdown, and I don't know html nor JS, so this is quite hard for me. </p>