Zoom Function In Rmarkdown Html Plot

Is there a way, like in this SO question here, to add zooming functionality to html_documents created with rmarkdown? I work in Rstudio. I have tried the following, but of course,

Solution 1:

Worked around Martin's solution, with a little bit of twist (centering an element in the viewport - the browser window).

# Insert this two chunks after YAML

```{css zoom-lib-src, echo = FALSE}
script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
```

```{js zoom-jquery, echo = FALSE}
 $(document).ready(function() {
    $('body').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')).css({width: '100%'});
      $('.zoomDiv').css({opacity: '1', width: 'auto', border: '1px solid white', borderRadius: '5px', position: 'fixed', top: '50%', left: '50%', marginRight: '-50%', transform: 'translate(-50%, -50%)', boxShadow: '0px 0px 50px #888888', zIndex: '50', overflow: 'auto', maxHeight: '100%'});
    });
    // onClick function for zoomImg
    $('img.zoomImg').click(function() {
      $('.zoomDiv').css({opacity: '0', width: '0%'}); 
    });
  });
```

After hitting the Knit button a document will be generated (and you may need to click on Open in Browser to generate the JavaScript). Output (click on graph to zoom in / zoom out):