如何放大Rmarkdown演示文稿中的地塊

我正在用rmarkdown（ioslides）創建我的第一個HTML演示文稿，並希望能夠手動放大幻燈片並導航到對象。
縮放在瀏覽器中正常工作（crtl +，crtl鼠標滾輪），但我無法移動幻燈片。無論是鼠標還是滾動條。後者不會像他們做的那樣出現在網站上。
有沒有適當的方式來實現這樣的事情，或者ioslides不打算這樣使用？如何放大Rmarkdown演示文稿中的地塊

我使用Ubuntu 16.04（LXDE）和rstudio（R版本3.2.3）。我嘗試在Firefox和Chromium中進行縮放和導航。

例如：

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

這也是第一次，我沒有找到計算器的答案，必然我的第一個條目。

來源

2016-11-03 Robert Hering

你需要滾動還是這只是關於放大的情節？ –

我認爲實現縮放後滾動的可能性會更容易。但jQuery工作正常，甚至是更好的解決方案！非常感謝。 –

我想你的問題主要是關於如何放大一些小小的情節。下面是使用jQuery的解決方案：

我們基本上以img元素添加div容器內，以我們的幻燈片。之後，我們將onClick功能集成到了所有的地塊（別名img元素）以及類別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") 
```

這將導致下面的介紹：

沒有點擊：

點擊第一條曲線：

來源

2016-11-03 21:40:16

我也加了'max-height：100％; 溢出：scroll;'參數到'.zoomDiv'，現在它對於高尺寸圖像也是完美的。非常感謝你！ –

不客氣。我將在我的答案中包含您的修改。 –

如何放大Rmarkdown演示文稿中的地塊

回答

相關問題