问题
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.
回答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>");
来源:https://stackoverflow.com/questions/40401680/how-to-zoom-in-on-plots-inside-an-rmarkdown-presentation